通过在第一个组合框中选择来更改组合框中的值答案

【问题标题】：Change values in combo box by selection in first combo box通过在第一个组合框中选择来更改组合框中的值
【发布时间】：2012-01-12 17:46:39
【问题描述】：

我有一些类似下面的代码。我想要它，这样当我在“选择 1”中选择一个项目时，它会更改第二个组合框中的项目，但我不确定最好的方法。它必须是 AJax 还是只用 Javascript 就可以完成？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label for="select1">Select 1</label>
    <select name="select1" id="select1">
      <option>Item 1</option>
      <option>Item 2</option>
      <option>Item 3</option>
      <option>Item 4</option>
    </select>
  </p>
  <p>
    <label for="Select2">Select 2</label>
    <select name="Select2" id="Select2">
      <option>List 1</option>
      <option>List 2</option>
      <option>List 3</option>
    </select>
  </p>

</form>
</body>
</html>

任何提示将不胜感激。汤姆

【问题讨论】：

标签： javascript asp.net html vb.net

【解决方案1】：

这里：

<html>
    <head>
        <!-- Connect jQuery from Google library storage -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- Create select for class, with id #class -->
        <select id="class" name="class">
            <option value="0">Econom</option>
            <option value="1">Business</option>
            <option value="2">First</option>
        </select>
        <!-- Create select for place, with id #place -->
        <select id="place" name="place" disabled="disabled"></select>
        <!-- Create view place for price, with id #price -->
        <span id="price"></span>
        <script type="text/javascript">
            // available places to choose 
            var available = {
                0:      {
                    25: 50
                },
                1:      {
                    26: 100
                },
                2:      {
                    21: 200,
                },
            }

            // When the document is totally loaded, do that things that's defined in function(e) {}
            $(document).ready(function(e){
                // Bind trigger for class select changing, where $('select#class') - find element that in DOM select inputs and has id="class"
                // When it change, call function(e) {}, inside this function $(this) will be the select itself
                $('select#class').live('change', function(e){
                    // find place select input
                    var place = $('select#place');
                    // if it's disabled, unblock it, and clean all options inside
                    place.removeAttr('disabled').find('option').remove();
                    // foreach places in available create option and put it into place select
                    for (var i in available[$(this).val()]) {
                        place.append($('<option />').val(i).html(i));
                    }
                    // behave like place select have changed, and trigger listener above
                    place.change();
                });

                $('select#place').live('change', function(e){
                    $('span#price').html(available[$('select#class').val()][$(this).val()]);
                });
            });
        </script>
    </body>
</html>

完全有效的示例。不知何故。

【讨论】：

完美，这正是我所需要的。谢谢

【解决方案2】：

您可以使用the following Cascading DropDown jQuery 插件

【讨论】：

【解决方案3】：

进行 ajax 调用是最好的方法。您可以将第一个选择框的值作为参数传递，以获取需要在第二个框中填充的值（填充第二个框可以使用 java 脚本完成）。

或

您可以用来自 ajax 调用的响应替换应放置在 div 内的整个第二个选择框，该选择框填充了必要的值

【讨论】：

【解决方案4】：

我的解决方案是纯 Javascript，不使用 jQuery 或 AJAX（？！？），但我强烈建议您研究 jQuery。

在正文的某处添加它。

<script type="text/javascript">
   function changeSelectTwo( elm ){
      var i;
      for (i = 0; i < elm.length; i++) {
         if( elm[i].selected ) {
            document.form1.Select2[i].selected = true;
         }
      }
   }
</script>

然后，修改第一个选择元素以在更改时调用它。

<select name="select1" id="select1" onChange="changeSelectTwo( this );" >

最后，为了使这个示例发挥最佳效果，在第二个选择中添加第四个选项。

有关更多信息，请参阅此内容： http://homepage.ntlworld.com/kayseycarvey/jss3p9.html

【讨论】：

【解决方案5】：

您可以使用 select1 中的 onchange javascript 处理程序来执行此操作：

<select name="select1" id="select1" onchange="Select1_Changed();">

这是javascript：

<script language="javascript" type="text/javascript">
    function Select1_Changed() {
        var select1 = document.getElementById("select1");
        var selectedItem = select1.options[select1.selectedIndex];
        var selectedText = selectedItem.text;
        var selectedValue = selectItem.value;
    }
</script>

【讨论】：