如何 - 第一個動態下拉菜單務必從第二個下拉菜單中選擇？

這裏試圖做的是這樣的 - 我有一個從MySQL表中工作的動態下拉列表。我正在嘗試製作第一個下拉菜單，選擇第二個下拉菜單中的任意選項。我試圖從第一個下拉列表中選擇選項值，在第二個下拉列表中更改功能&檢查它是否爲空。如何 - 第一個動態下拉菜單務必從第二個下拉菜單中選擇？

但還沒有成功。這裏是代碼：

 <!doctype html> 
     <html> 
     <head> 
      <meta charset="utf-8"> 
      <title>Untitled Document</title> 

      <script type="text/javascript"> 

       $(document).ready(function (e) { 

        $("#cat").change(function one() { 

         var textval = $(":selected", this).html(); 
         var url = $(this).val(); // get selected value 

         if (url) { // require a URL 
          window.location = 'page.php?cat=' + url + '&subcat=' + textval; // redirect 
         } 

        // store value of selected option in url. This value be paseed on to below function two(); 

        // function two(url); 

        }) // cat change function ends 

        $("#subcat").change(function two() { 

         var numval = $(":selected", this).val(); 
         //$("#aid").val(numval); 

         var textval2 = $(":selected", this).html(); 
         //$('input[name=villa-name]').val(textval2); 

         window.location = window.location.href + '&subcat=' + numval; 


        }) 

       }); 


      </script> 


     </head> 
     <body> 
     </body> 
     </html>

在此先感謝。仍然想知道如何在jQuery中做到這一點？

來源

2016-07-09 luna.romania

變化事件在DD1 ID做smthing如改變頁面的網址，但是這不是我關心的。我的問題是 - 如果我選擇第二個下拉選項而不選擇第一個下拉菜單，則不允許。現在，如果沒有從dd1中選擇任何內容，這意味着它是空的，那麼不能允許dd2或給出警報 –

我不確定，但如果您嘗試從兩個下拉列表的選定值中構建一個URL，則可以這樣做。

var catWasSelected = false; 
$("#cat").change(function() { 
    catWasSelected = true; 
}); 

$("#subcat").change(function() { 
    if(catWasSelected){ 
     var cat = $("#cat").val(); 
     var subcat = $("#subcat").val(); 
     window.location = 'page.php?cat=' + cat + '&subcat=' + subcat; 
    }else{ 
     // set the subcategory back to default 
     // something like: $("#subcat").val("default"); 
     alert("Please select a category"); 
    } 
});

來源

2016-07-09 14:03:54 Titus

$("#subcat").attr("disabled", "disabled"); 
 

 
$("#cat").change(function() { 
 
    if ($("#cat option:selected").val() !== "---") { 
 
    $("#subcat").removeAttr("disabled") 
 
    } else { 
 
    $("#subcat").attr("disabled", "disabled"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="cat"> 
 
    <option value="---">Select one</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
</select> 
 

 
<select id="subcat"> 
 
    <option value="---">Select another</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
</select>

另外，我假設你想要的第二次下降的物向下取決於第一個下拉的選擇。看起來你正在處理這個邏輯服務器端。如果繼續使用該路線，則可以通過在子類別元素服務器端添加disabled="disabled"屬性，在初始頁面加載時禁用第二個下拉列表。

我會建議，而不是，因爲它避免了一整頁刷新，是要麼讓服務器包括了所有可能的類別和子類別一個人口JavaScript對象在頁面加載時，或添加AJAX端點當主要類別改變時請求子類別。

第一個方案是讓服務器有類似的反應如下：基於$('#cat option:selected').val()

<script type="text/javascript"> 
var categories = [ 
    { 
     name: 'Category 1', 
     value: 'cat1', 
     children: [ 
      { name: 'Subcategory 1', value: 'sub1' }, 
      { name: 'Subcategory 2', value: 'sub2' }, 
     ] 
    }, 
    { 
     name: 'Category 2', 
     value: 'cat2', 
     children: [ 
      { name: 'Subcategory 3', value: 'sub3' }, 
      { name: 'Subcategory 4', value: 'sub4' }, 
     ] 
    } 
]; 
</script>

...所以你可以再更改上面的例子，從這個數組填充#cat和#subcat 。像下面這樣：

$("#cat").html('<option value="---">Select one</option>'); 
 
$("#subcat").html('<option value="---">Select another</option>'); 
 
$("#subcat").attr("disabled", "disabled"); 
 

 
categories.forEach(function(cat) { 
 
    var $cat = $("<option />") 
 
    .val(cat.value) 
 
    .html(cat.name); 
 
    $("#cat").append($cat); 
 
}); 
 

 
$("#cat").change(function() { 
 
    
 
    
 
    $("#subcat .subcat").remove(); 
 
    $("#subcat").attr("disabled", "disabled"); 
 
    
 
    var $selectedCategory = $('#cat option:selected'); 
 
    
 
    if ($selectedCategory.val() !== "---") { 
 
    
 
    $("#subcat").removeAttr("disabled"); 
 
    
 
    var cat = categories.find(function(cat) { 
 
     return cat.value === $selectedCategory.val(); 
 
    }); 
 
    
 
    if (cat.hasOwnProperty('children')) { 
 
     
 
     cat.children.forEach(function(subcat) { 
 
     
 
     var $subcat = $('<option class="subcat" />') 
 
      .val(subcat.value) 
 
      .html(subcat.name); 
 
     $("#subcat").append($subcat); 
 
     
 
     }); 
 
     
 
    } 
 
    
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script type="text/javascript"> 
 
var categories = [ 
 
    { 
 
     name: 'Category 1', 
 
     value: 'cat1', 
 
     children: [ 
 
      { name: 'Subcategory 1', value: 'sub1' }, 
 
      { name: 'Subcategory 2', value: 'sub2' }, 
 
     ] 
 
    }, 
 
    { 
 
     name: 'Category 2', 
 
     value: 'cat2', 
 
     children: [ 
 
      { name: 'Subcategory 3', value: 'sub3' }, 
 
      { name: 'Subcategory 4', value: 'sub4' }, 
 
     ] 
 
    } 
 
]; 
 
</script> 
 

 
<select id="cat"></select> 
 

 
<select id="subcat"></select>

來源

2016-07-09 14:38:49

很好地完成。它讓我很高興看到您使用javascript來設置'disabled'的初始值。很多人忘了優雅的退化並將屬性放在HTML中，如果在頁面加載時由於某種原因而導致JavaScript中斷，則表單無用。 –

如何 - 第一個動態下拉菜單務必從第二個下拉菜單中選擇？

回答

相關問題