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

我想知道在combobox中选择其他值时如何显示文本框

例如，当我将组合框的值从“现金”更改为“银行”时，它将显示一个文本框，其他文本框也是如此。

使用JQuery：

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

$（'select'）。更改（函数（）{
var val=$（this.val（）
开关（val）{
“现金”一案：
$（'现金'）.show（）
打破
案例“银行”：
$（'银行'）.show（）
打破
...
}
})

在表格中放置一个文本框，并给出表格的id。 然后在onitemchange事件中调用一个函数。在函数中写入：

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

---

您也可以使用jQuery来实现这一点。

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

请选择
现金
银行
现金：
银行：

在这里，我使用java脚本为上述问题创建了BIN

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>

#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;

    }
}

JAVASCRIPT:

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

#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;

    }
}

---

演示：

澄清一下：当您在

下拉列表中选择一个选项时，您希望显示一个文本框来修改给定选定值的值吗？@bokonic，不，只有一个空白文本框就可以了。为什么要将文本框放在表格中？为什么不使用文本框的ID？请你解释一下如何使用纯java脚本@Jon PWeird来实现这一点，我试图修改你的编码，并尝试将其放在头部，但不起作用？我喜欢你的编码，因为它易于理解。