0

コンボボックスで他の値を選択したときにテキストボックスを表示する方法を知りたかった.

たとえば、コンボ ボックスの値を Cash から Bank に変更すると、テキスト ボックスが表示されます。他のボックスも同様です。

4

5 に答える 5

1

ここでは、 http://codebins.com/bin/4ldqpa0で Java スクリプトを使用して上記の問題のビンを作成しました。

HTML:

<select id="ChoiceMaker" name="ChoiceMaker">
  <option value="">
    Please choose
  </option>
  <option value="cash">
    Cash
  </option>
  <option value="bank">
    Bank
  </option>
</select>
<div id="cashContainer">
  Cash: 
  <input type="text" id="cash"/>
</div>
<div id="bankContainer">
  Bank: 
  <input type="text" id="cash"/>
</div>

CSS:

#cashContainer {
  display:none;
}
#bankContainer{
  display:none;
}

ジャバスクリプト:

var choice_combo = document.getElementById('ChoiceMaker');
choice_combo.onchange = function() {
    switch (this.value.toLowerCase()) {
    case 'cash':
        document.getElementById("bankContainer").style.display = 'none';
        document.getElementById("cashContainer").style.display = 'block';
        break;
    case 'bank':
        document.getElementById("cashContainer").style.display = 'none';
        document.getElementById("bankContainer").style.display = 'block';
        break;

    }
}

デモ: http://codebins.com/bin/4ldqpa0

于 2012-07-23T06:39:29.370 に答える
0

JQuery の使用:

$('select#yourID').change(function(){
    $('#textboxID').show();
});
于 2012-07-23T03:57:29.490 に答える
0 
$('select').change(function(){
  var val = $(this).val()
  switch (val) {
    case 'Cash':
      $('#cash').show()
      break
    case 'Bank':
      $('#bank').show()
      break
    ...
  }
})
于 2012-07-23T03:57:54.610 に答える
0

そしてselectedIndexを使用した別のバージョン

JQuery

  $(document).ready(function()
  {
    // Set initial state
    $("#cashContainer").hide();
    $("#bankContainer").hide();

    // How it all works
    $("#ChoiceMaker").change(function () {
      $value = $("#ChoiceMaker")[0].selectedIndex;
      // You can also use $("#ChoiceMaker").val(); and change the case 0,1,2: to the values of the html select options elements

      switch ($value)
      {
        case 0:
          $("#cashContainer").hide();
          $("#bankContainer").hide();
          alert("Please make a choice");
          break;
        case 1:
          $("#cashContainer").show();
          $("#bankContainer").hide();
          break;
        case 2:
          $("#cashContainer").hide();
          $("#bankContainer").show();
          break;
      }


    });

  });

HTML

    <select id="ChoiceMaker" name="ChoiceMaker">
            <option value="">Please choose</option>
            <option value="cash">Cash</option>
            <option value="bank">Bank</option>
    </select>
    <div id="cashContainer">Cash: <input type="text" id="cash"/></div>
    <div id="bankContainer">Bank: <input type="text" id="cash"/></div>
于 2012-07-23T04:12:17.357 に答える
-1

テーブルにテキスト ボックスを配置し、テーブルの ID を指定します。次に、onitemchange イベントで関数を呼び出します。関数内で次のように記述します。

document.getelementById("tableid").display="none";// for hiding
document.getelementById("tableid").display="block";// for showing

jQuery を使用してこれを行うこともできます。

于 2012-07-23T03:58:09.160 に答える