多重鏈式SELECT標籤JavaScript和jQuery

美好的一天！ :)多重鏈式SELECT標籤JavaScript和jQuery

我創建了一個鏈接選擇http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/此頁上使用PHP和jQuery喜歡和我創建了一個JavaScript來添加和刪除選擇標籤，我得到它的地方，在互聯網上但什麼發生的是，當我選擇的類別第一行，子類別中的所有內容都將被啓用，並且也將在產品描述中顯示。就這樣http://i.stack.imgur.com/H9nfb.jpg

這是我的代碼：

<html> 

    <head> 
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("select#type").attr("disabled", "disabled"); 


       $("select#category").change(function() { 
        $("select#type").attr("disabled", "disabled"); 
        $("select#type").html("<option>wait...</option>"); 
        var id = $("select#category option:selected").attr('value'); 
        $.post("select_type.php", { 
         id: id 
        }, function(data) { 
         $("select#type").removeAttr("disabled"); 
         $("select#type").html(data); 
        }); 

       }); 

       $("select#desc").attr("disabled", "disabled"); 
       $("select#type").change(function() { 
        $("select#desc").attr("disabled", "disabled"); 
        $("select#desc").html("<option>wait...</option>"); 
        var id = $("select#type option:selected").attr('value'); 
        $.post("select_desc.php", { 
         id: id 
        }, function(data) { 
         $("select#desc").removeAttr("disabled"); 
         $("select#desc").html(data); 
        }); 

       }); 
       $("form#select_form").submit(function() { 
        var cat = $("select#category option:selected").attr('value'); 
        var type = $("select#type option:selected").attr('value'); 
        var descr = $("select#desc option:selected").attr('value'); 
        if (cat > 0 && type > 0 && descr > 0) { 
         var result = $("select#desc option:selected").html(); 
         $("#result").html('your choice: ' + result); 
        } else { 
         $("#result").html("you must choose two options!"); 
        } 
        return false; 
       }); 
      }); 
     </script> 
     <script type="text/javascript"> 
      function addRow(tableID) { 

       var table = document.getElementById(tableID); 

       var rowCount = table.rows.length; 
       var row = table.insertRow(rowCount); 

       var colCount = table.rows[0].cells.length; 

       for (var i = 0; i < colCount; i++) { 

        var newcell = row.insertCell(i); 

        newcell.innerHTML = table.rows[1].cells[i].innerHTML; 
        //alert(newcell.childNodes); 
        switch (newcell.childNodes[0].type) { 
         case "text": 
          newcell.childNodes[0].value = ""; 
          break; 
         case "checkbox": 
          newcell.childNodes[0].checked = false; 
          break; 
         case "select-one": 
          newcell.childNodes[0].selectedIndex = 0; 
          break; 
        } 
       } 
      } 

      function deleteRow(tableID) { 
       try { 
        var table = document.getElementById(tableID); 
        var rowCount = table.rows.length; 

        for (var i = 0; i < rowCount; i++) { 
         var row = table.rows[i]; 
         var chkbox = row.cells[0].childNodes[0]; 
         if (null != chkbox && true == chkbox.checked) { 
          if (rowCount <= 2) { 
           alert("Cannot delete all the rows."); 
           break; 
          } 
          table.deleteRow(i); 
          rowCount--; 
          i--; 
         } 


        } 
       } catch (e) { 
        alert(e); 
       } 
      } 
     </script> 
    </head> 

    <body> 
     <?php include "select.class.php"; ?> 
     <form id="select_form"> 
      <input type="button" value="Add" onclick="addRow('tableID')" /> 
      <input type="button" value="Delete" onclick="deleteRow('tableID')" /> 
      <table id="tableID"> 
       <tr> 
        <td></td> 
        <td>Category</td> 
        <td>SubCategory</td> 
        <td>Product Description</td> 
       </tr> 
       <tr> 
        <td> 
         <input type="checkbox" name="chkbox[]" /> 
        </td> 
        <td> 
         <select id="category" name="category[]"> 
          <?php echo $opt->ShowCategory(); ?></select> 
        </td> 
        <td> 
         <select id="type" name="type[]"> 
          <option value="0">choose...</option> 
         </select> 
        </td> 
        <td> 
         <select id="desc" name="desc[]"> 
          <option value="0">choose...</option> 
         </select> 
        </td> 
       </tr> 
      </table> 
      <input type="submit" value="confirm" /> 
     </form> 
     <div id="result" name="result[]"></div> 
    </body> 

</html>

希望有人可以幫助我。 :)

來源

2013-10-06 Jill Rose

那麼你的問題是什麼？ – Rajesh

我的問題是，當我在第一行中選擇一個類別時，子類別（包括其他行）上的所有內容都將被啓用，並且也在產品描述上。把這個圖片http://i.stack.imgur.com/H9nfb.jpg作爲你的參考。 :)我該如何解決這個問題？ –

更改您的代碼不禁用它們。 – Rajesh

<select type='text' class='chosen-select'>                    
    <option value='initial'>Select One...</option>                   
</select> 

<select 'type='text' class='chosen-select' >                    
    <option value='1' class='initial'>-----</option>                                    
</select>

使用這樣的東西。如果用戶選擇了「選擇一個」，它將在下一個按鈕中顯示「----」。相應地設置課程以使其適用於您。

來源

2015-06-20 02:23:29 aqqq

多重鏈式SELECT標籤JavaScript和jQuery

回答

相關問題