Question

这里我要做的就是 - 我有一个来自mysql表的工作动态下拉列表。我试图让第一次下拉强制，从第二次下拉选择任何选项。我试图从第一个下拉列表中传递选定的选项值，在第二个下拉列表更改功能＆amp;检查它是否为空。

但还没有成功。这是代码：

      <!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中执行此操作？

Answer 1

$("#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端点请求子类别。

第一个选项会让服务器在响应中包含以下内容：

<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 option:selected').val()。如下所示：

$("#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>

Answer 2

我不确定，但如果您尝试根据两个下拉列表中选定的值构建网址，则可以执行以下操作。

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");
     }
});

如何 - 让第一个动态下拉列表必须从第二个下拉列表中选择？

2 个答案: