单击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函数，同时给每个隐藏选项一个公共类来一次选择所有。

JQ：

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

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

Answer 2

JSFIDDLE

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

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

请记住：在.中按类名选择需要.className，依此类推，请阅读选择器:)

Answer 3

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

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

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

}）;