Question

我现在有些困惑。当用户从选择下拉列表中选择一个特定选项时，我想要显示带有文本的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>

Answer 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>

要回答您的问题，您不需要将el替换为select对象，该对象是在更改事件处理程序的选择框中调用this时使用on_change()传递的。 / p>

此外，请不要在此处接受基本上每个其他答案的建议。导入jQuery来执行像设置事件处理程序和操作DOM这样简单的操作是过分且毫无意义的 - 在学习jQuery之前学习JavaScript。

Answer 2

首先，您应该向value添加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将消失。

Answer 3

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

参考代码：

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();

Answer 4

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

 $('select').change(function() {
        var str = $( "select option:selected" ).text();
        if(str  === 'One') {
           $('#text').removeAttr('style');
        }
    });

选择某个选项时如何显示文本

4 个答案: