0

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

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

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

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

于 2012-07-23T06:39:29.370 回答
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 回答
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 回答
-1

在表格中放置一个文本框并为表格指定一个 id。然后在 onitemchange 事件中调用一个函数。在函数里面写：

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

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

于 2012-07-23T03:58:09.160 回答