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

Question

不幸的是，我在 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');
}

Answer 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 函数中触发，同时为每个隐藏选项提供一个公共(public)类以一次选择所有选项。

jq:

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

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