选择某个选项时如何使文本出现答案

【问题标题】：How to make text appear when you choose a certain option选择某个选项时如何使文本出现
【发布时间】：2013-08-26 06:17:27
【问题描述】：

我现在有点卡住了。当用户从选择下拉表单中选择一个特定选项时，我想显示一个带有文本的 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>

【问题讨论】：

嗨，我在您的代码中有一个更正。将显示：隐藏更改为显示：无。没有显示：隐藏。它唯一的可见性：隐藏

标签： javascript html

【解决方案1】：

根据 cmets，您希望在选择“Two”时显示 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 替换为选择对象，该对象是在选择框onChange 事件处理程序中调用on_change() 时使用this 传递的。

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

【讨论】：

感谢您的回答。我仍然看到一些麻烦，但我不确定。在脚本中，我是否必须将“el”替换为选择表单的名称？当我选择值二（因为它将显示文本）时，它不会显示。
@JakeBrunton 更新了上面的答案..我的错我本来打算早点留下这个评论

【解决方案2】：

首先，您应该将value 属性添加到options 并在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会消失。

【讨论】：

+1 因为您没有添加 jQuery 作为依赖项，并且使用 CSS 类与内联样式绝对是首选

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

如果您可以在页面中包含 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();

【讨论】：