單擊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>

在jQ函數中為選擇器提供了一個要觸發的ID，還為每個隱藏選項提供了一個共同的類以一次選擇所有對象。

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

}）;