Question

我想知道当我在组合框中选择其他值时如何显示文本框。

例如，当我将组合框的值从Cash更改为Bank时，它将显示一个文本框，同样也会显示给其他人。

Answer 1

上的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;
}

<强> JAVASCRIPT：

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;

    }
}

DEMO：http://codebins.com/bin/4ldqpa0

Answer 2

使用JQuery：

$('select#yourID').change(function(){
    $('#textboxID').show();
});

Answer 3

$('select').change(function(){
  var val = $(this).val()
  switch (val) {
    case 'Cash':
      $('#cash').show()
      break
    case 'Bank':
      $('#bank').show()
      break
    ...
  }
})

Answer 4

使用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>

Answer 5

在表格中放置一个文本框，并为表格提供一个id。然后在onitemchange事件中调用一个函数。在函数内部写：

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

您也可以使用jQuery执行此操作。

当组合框值更改时，显示一个文本框

5 个答案: