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

时间:2012-01-12 17:46:39

标签: javascript asp.net html vb.net

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

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

5 个答案:

答案 0 :(得分:2)

下面:

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

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

我的解决方案是纯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

答案 4 :(得分:0)

您可以使用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>