单击 html 选择选项时显示额外的表单输入字段答案

【问题标题】：Show extra form input fields when an html select option is clicked单击 html 选择选项时显示额外的表单输入字段
【发布时间】：2014-07-17 17:12:48
【问题描述】：

我希望在选择一个选项时显示一些文本字段（并隐藏其他选项）不幸的是我对 JavaScript 的尝试很糟糕。

aaa 选择 xxx，yyy 可见 bbb 选择 xxx，zzz 可见 ccc 选择 yyy，zzz 可见

CSS 代码：

.aaa, .bbb, .ccc {
    display:none;
}

HTML 代码：

<select  onchange="showExtra(this)">
  <option>Select</option>
  <option value="aaa">AAA</option>
  <option value="bbb">BBB</option>
  <option value="ccc">CCC</option>
</select>

<div class="aaa bbb">
  <input name="xxx" type="text" />
</div>
 <div class="aaa ccc">
  <input name="yyy" type="text" />
</div>
  <div class="bbb ccc">
<input name="zzz" type="text" />
</div>

JavaScript 代码：

function showExtra(option)
{
   var divClass = option.value;
   $(divClass:not).hide();
   $divClass.slideDown('medium');
}

【问题讨论】：

标签： javascript html css html-select

【解决方案1】：

我已经重新格式化了一些东西：

html:

<select id="selector">
  <option>Select</option>
  <option value="aaa">AAA</option>
  <option value="bbb">BBB</option>
  <option value="ccc">CCC</option>
</select>

<div class="aaa bbb op">
  <input name="xxx" type="text"  placeholder="xxx"/>
</div>
 <div class="aaa ccc op">
  <input name="yyy" type="text" placeholder="yyy"/>
</div>
  <div class="bbb ccc op">
<input name="zzz" type="text" placeholder="zzz"/>
</div>

给选择器一个 id 以在 jQ 函数中触发，也给每个隐藏选项一个公共类，以便一次选择所有。

jq:

$('#selector').on('change',function()
{
   var divClass = $(this).val();
   $(".op").hide();
   $("."+divClass).slideDown('medium');
});

将 onChange 绑定到选择器，获取当前值，隐藏所有选项，显示相关选项 http://jsfiddle.net/66rN8/1/

【讨论】：

【解决方案2】：

JSFIDDLE

var showExtra = function(option)
{
   var divClass = option.value;
   $("div:not(." + divClass + ")").hide();
   $("." + divClass).slideDown('medium');
}

值得注意的是，您还应该考虑添加div:not，否则您可能会隐藏您的选择，如果这不是计划的一部分。

记住：按类名选择需要. in .className 等等，阅读选择器:)

【讨论】：

【解决方案3】：

或者，您可以切换样式的显示属性。

function showExtra(option)
{
   var divClass = option.value;
   $('.' + divClass).css({ display: 'inline' });
}

【讨论】：

【解决方案4】：

这样的？用jquery的方式 http://jsfiddle.net/HxGQ6/

$(document).ready(function(){
$('select').change(function () {
    var a=$(this).find("option:selected");
    var b=a.val();
    $(".aaa,.bbb,.ccc").hide();
    $("."+b).show();
});

});

【讨论】：