当一个html选择选项被点击时显示额外的表单输入字段

Show extra form input fields when an html select option is clicked

本文关键字：显示 字段 输入 表单 一个 选项 选择 html      更新时间：2023-09-26

我想在选择选项时显示文本字段的选择(并隐藏其他选项)不幸的是，我在JavaScript方面的尝试非常糟糕。

aaa selected xxx, yyy visibleBBB选中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');
}

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

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函数中触发，还为每个隐藏选项提供了一个公共类，以便一次选择所有选项。

金桥:

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

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

jsfield 

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

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

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

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

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

像这样?使用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();
});

});

相关文章：