Question

我有一些代码如下。我想要它，以便当我在'select 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>

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

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

完全有效的例子。不知怎的那样。

Answer 2

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

Answer 3

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

或

你可以用ajax调用的响应替换整个第二个选择框，这个选择框应放在div中，这是一个填充了必要值的选择框

Answer 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元素，以便在更改时调用它。

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

最后，为了使此示例最佳，请向第二个选择添加第四个选项。

有关详情，请参阅此处： http://homepage.ntlworld.com/kayseycarvey/jss3p9.html

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

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

5 个答案: