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

when combo box value changed, display a textbox

本文关键字：一个 文本 组合 显示      更新时间：2024-01-14

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

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

在这里，我使用java脚本在http://codebins.com/bin/4ldqpa0

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

演示：http://codebins.com/bin/4ldqpa0

使用JQuery:

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

和另一个使用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>

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

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

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

您也可以使用jQuery来完成此操作。

相关文章：