顯示每個下拉選項的信息

我有2個jQuery下拉菜單。第二個下拉菜單的內容取決於從第一個下拉菜單中選擇的值。顯示每個下拉選項的信息

的代碼是在標題標籤

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script type="text/javascript" defer="defer"> 
    function cascadeSelect(parent, child){ 
      var childOptions = child.find('option:not(.static)'); 
       child.data('options',childOptions); 

      parent.change(function(){ 
       childOptions.remove(); 
       child 
        .append(child.data('options').filter('.sub_' + this.value)) 
        .change(); 
      }) 

      childOptions.not('.static, .sub_' + parent.val()).remove(); 

    } 

    $(function(){ 
     cascadeForm = $('.cascadeTest'); 
     orgSelect = cascadeForm.find('.orgSelect'); 
     terrSelect = cascadeForm.find('.terrSelect'); 
     locSelect = cascadeForm.find('.locSelect'); 

     cascadeSelect(orgSelect, terrSelect); 
     cascadeSelect(terrSelect, locSelect); 
    }); 
</script>

我想要做的是顯示對每個選項的信息，一個div這個鏈接腳本http://jsfiddle.net/5tmwg/

樣品上。我缺乏JavaScript和jQuery的經驗，所以請詳細解釋，謝謝。

來源

2012-12-23 Faisal

我真的不知道你想要做什麼，但我會想試試 - > [** ** FIDDLE（http://jsfiddle.net/adeneo/5tmwg/1/） ... – adeneo

我希望每次在div中顯示的保管箱中選擇一個選項。如果我改變選項的div會改變....感謝您嘗試 – Faisal

代碼是所有關於兒童和父母的混亂。它應該做什麼**完全**。更改div不是信息性答案 – charlietfl

這應該讓你開始。

<html> 
    <head> 
    <title></title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
     <script type="text/javascript" defer="defer"> 
      //Function that handles displaying the details about the organization 
      function orgDetails(){ 
       var org = $("#org").attr("value");//get user selection from form 
       var div1 = $("#div1");//the div to display info 
       //determine what to display in your div1 
       switch(org) 
       { 
       case "1": 
        div1.html("this is all about organization 1");//output the info 
        break; 
       case "2": 
        div1.html("<p>this is all about organization 2</p>"); 
        break; 
       case "3": 
        div1.html("<b>this</b> is all about organization 3"); 
        break; 
       default: 
        div1.html("<font color='red'>Select Organization</font>"); 
       } 
       $("#div2").fadeOut(300);//if territory div is set, hide it 
       div1.fadeIn(300);//if div1 has already been hidden, unhide it. 
      } 

      //Function that handles displaying the details about the territory 
      function TerritoryDetails(){ 
       var terr = $("#terrSelect").attr("value"); 
       var div = $("#div2"); 
       div.fadeIn(300); 
       $("#div1").slideUp(300);//hide organization (optional) 
       switch(terr) 
       { 
       case "1": 
        div.html("this is all about Territory 1"); 
        break; 
       case "2": 
        div.html("this is all about Territory 2"); 
        break; 
       case "3": 
        div.html("this is all about Territory 3"); 
        break; 
       case "4": 
        div.html("this is all about Territory 4"); 
        break; 
       case "5": 
        div.html("this is all about Territory 5"); 
        break; 
       case "6": 
        div.html("this is all about Territory 6"); 
        break; 
       case "7": 
        div.html("this is all about Territory 7"); 
        break; 
       default: 
        div.html("Select Territory"); 
       } 
      } 



      function cascadeSelect(parent, child){ 
        var childOptions = child.find('option:not(.static)'); 
         child.data('options',childOptions); 

        parent.change(function(){ 
         childOptions.remove(); 
         child 
          .append(child.data('options').filter('.sub_' + this.value)) 
          .change(); 
        }) 

        childOptions.not('.static, .sub_' + parent.val()).remove(); 

      } 

      $(function(){ 
       cascadeForm = $('.cascadeTest'); 
       orgSelect = cascadeForm.find('.orgSelect'); 
       terrSelect = cascadeForm.find('.terrSelect'); 
       locSelect = cascadeForm.find('.locSelect'); 

       cascadeSelect(orgSelect, terrSelect); 
       cascadeSelect(terrSelect, locSelect); 
      }); 
     </script> 
    </head> 
    <body> 
     <form action="#" class="cascadeTest"> 
      <table> 
       <tr> 
        <th>Organization:</th> 
        <td> 
         <!--added an onchange event listener to call our function when the user has selected an option--> 
         <select name="orgSelect" id="org" class="orgSelect" onchange="javascript:orgDetails();"> 
          <option value="0">Select a Category</option> 
          <option value="1">Cat1</option> 
          <option value="2">Cat2</option> 
          <option value="3">Cat3</option> 
         </select> 
        </td> 
       </tr> 
       <tr> 
        <th>Territory:</th> 
        <td> 
         <!--added an onchange event listener to call our function when the user has selected an option--> 
         <select name="terrSelect" class="terrSelect" id="terrSelect" onchange="javascript:TerritoryDetails();"> 
          <option value="0" class="static">- Select a Product-</option> 
          <option value="1" class="sub_1">Product 1</option> 
          <option value="2" class="sub_1">Product 2</option> 
          <option value="3" class="sub_2">Product 3</option> 
          <option value="4" class="sub_2">Product 4</option> 
          <option value="5" class="sub_3">Product 5</option> 
          <option value="6" class="sub_3">Product 6</option> 
          <option value="7" class="sub_3">Product 7</option> 
         </select> 
        </td> 
       </tr> 
      </table> 
     </form> 
       <div id="div1"> 
        <p></p> 
       </div> 
       <div id="div2"> 
        <p></p> 
       </div> 
    </body> 
    </html>

來源

2012-12-23 22:33:15 Charlie

http://jsfiddle.net/5tmwg/3/已更新小提琴 – Charlie

http://www.w3schools.com/js/js_switch.asp有關開關/外殼語法的信息以及它的功能 – Charlie

http://jsfiddle.net/5tmwg/5/更新小提琴（爲你完成的子元素）添加了一些jQuery動畫以及你可以看到如何使它更加用戶友好 – Charlie

顯示每個下拉選項的信息

回答

相關問題