通過在第一個組合框中的選擇更改組合框中的值

我有一些像下面這樣的代碼。我需要它，所以當我在'選擇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

通過在第一個組合框中的選擇更改組合框中的值

回答

相關問題