2

我现在有点卡住了。当用户从选择下拉表单中选择一个特定选项时，我想显示一个带有文本的 DIV。这如何在 Javascript 中完成？我在网上找到的仅取您选择的内容并显示您选择的值。

然而，我想做这样的事情：

<select>
<option>One</option>
<option>Two</option>
</select>

<div id="text" style="display:hidden;">The text would show if the user chooses option "Two"</div>

有人知道怎么做吗？

更新：

这是我的问题。我现在尝试在正文和标题中使用此脚本：

<script type="text/javascript">
document.getElementById('script-choose').onchange=function(){
for(var i=0;i<document.getElementsByClassName('option-show').length;i++){
    document.getElementsByClassName('option-show')[i].style.display='none';
}
document.getElementById(document.getElementById('script-choose').value == 'gold').style.display='block';}
</script>

我的选择表单的 id 是“script-choose”，而我用来显示隐藏文本的值是“gold”。不过，无论我何时选择“黄金”值，它都不会显示文本。这是我正在使用的 DIV：

<div id="one-show" class="option-show" style="font-size:10.5px;color:red;">You will get one free theme of choice later on! :D </div>
4

4 回答 4

1

根据评论，您希望在选择“二”时显示 div。为清楚起见，这是从头到尾的整个代码：

<select id="mySelect" onchange='on_change(this)'> // Note the onchange event handler, which passes the select object to the on_change function via the 'this' variable
    <option value='one'>One</option> // Note I added value='one'
    <option value='two'>Two</option> // Note I added value='two'
</select>

<div id="text" style="display:none;"> // Note display:none instead of display:hidden
    The text would show if the user chooses option "Two"
</div>

<script>
    function on_change(el){
        if(el.options[el.selectedIndex].value == 'two'){ 
            document.getElementById('text').style.display = 'block'; // Show el
        }else{
            document.getElementById('text').style.display = 'none'; // Hide el
        }
    }
</script>

要回答您的问题，您不需要替换为 select 对象，该对象是在 select 框 onChange 事件处理程序中调用时el通过 using 传递的。thison_change()

此外，不要在这里接受基本上所有其他答案的建议。. 导入 jQuery 来做一些像设置事件处理程序和操作 DOM 这样简单的事情是过度且毫无意义的 - 在学习 jQuery 之前学习 JavaScript。

于 2013-08-26T06:21:28.920 回答
1

首先，您应该value向 s 添加属性option并在 select 上有一个 id，如下所示：

<select id="select-show">
    <option value="one">One</option>
    <option value="two">Two</option>
</select>

您还应该在要显示的 div 上放置一个 id 和 class，如下所示：

<div id="one-show" class="option-show">blah blah blah</div>

你也需要这个 css：

.option-show{
    display:none;
}

然后也有这个脚本：

document.getElementById('select-show').onchange=function(){
    for(var i=0;i<document.getElementsByClassName('option-show').length;i++){
        document.getElementsByClassName('option-show')[i].style.display='none';
    }
    document.getElementById(document.getElementById('select-show').value+'-show').style.display='block';
}

jsfiddle：http: //jsfiddle.net/markasoftware/kyyxZ/1/

请注意，这也会使其他 div 消失。如果选择两个，则会出现 div 2。选择一个，1会出现，2会消失。

于 2013-08-26T06:38:15.657 回答
0

如果您可以在页面中包含 jQuery，请查看此处的工作示例：JSBin 示例

参考代码：

HTML：

<select id="mySelect">
<option>One</option>
<option>Two</option>
</select>

<div id="text" style="display:none;">The text would show if the user chooses option "Two"</div>

包括这个 jQuery：

    $( "#mySelect" ).change(function () {

     if($( "#mySelect").val()=="Two")
          {   
            $( "#text" ).css('display','block');
          }
     else{
       $( "#text" ).css('display','none');
     }
  })
  .change();
于 2013-08-26T06:19:42.763 回答
0

如果你使用 jQuery。最好添加一个名为 hidden 的类。这是 {display:none}，您可以轻松切换 div 的可见性。

 $('select').change(function() {
        var str = $( "select option:selected" ).text();
        if(str  === 'One') {
           $('#text').removeAttr('style');
        }
    });
于 2013-08-26T06:24:13.153 回答