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

我有一些像下面这样的代码。我需要它，所以当我在'选择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>

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

来源

2012-01-12 TMB87

这里：

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

完全工作的例子。不知何故。

来源

2012-01-12 18:01:37 devdRew

完美，这就是正是我所需要的。谢谢 – TMB87 2012-01-13 17:02:22

您可以使用the following级联下拉jQuery插件

来源

2012-01-12 18:01:12

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

或

可以更换整个第二选择框，应将其放在一个div内从Ajax调用，这是填充了必要的瓦莱斯

选择框响应

来源

2012-01-12 18:02:43 Abhi

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

最后，为了使这个例子效果最好，在第二个select中添加第四个选项。

更多信息请参阅本：

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

这是JavaScript： http://homepage.ntlworld.com/kayseycarvey/jss3p9.html

来源

2012-01-12 18:03:54

你可以用一个onchange JavaScript处理中选择1要这样做

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

来源

2012-01-12 18:05:13

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

回答

相关问题