方法 - 最初のダイナミックドロップダウンを2番目のドロップダウンから選択する必要がありますか？

ここで何をしようとしているのですか？私はmysqlテーブルから動的に動作するドロップダウンセットを持っています。私は第2ドロップダウンから任意のオプションを選択するために第1ドロップダウンを強制しようとしています。最初のドロップダウンから2番目のドロップダウン変更機能&が空であるかどうかをチェックして、選択したオプション値を渡そうとしています。方法 - 最初のダイナミックドロップダウンを2番目のドロップダウンから選択する必要がありますか？

しかし、まだ成功していません。コードは次のとおりです。

 <!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

変更イベントページのURLを変更するようsmthingやって、それは私の問題ではありません。私の問題は - 私は第1ドロップダウを選択せずに第2ドロップダウンオプションを選択した場合、それは許されてはならない。今、dd1から何も選択されていなければ、それは空であることを意味し、dd2は許可されていてはならない、または警告を与えてはならない。 –

2つのドロップダウンリストの選択した値から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>

また、私はあなたが2番目のドロップダウンの内容は、最初のドロップダウンの選択に依存したいと仮定しています。あなたはこの論理サーバー側を扱っているようです。そのルートを続行する場合は、サブページ要素サーバー側にdisabled="disabled"属性を追加することで、最初のページの負荷で2番目のドロップダウンを無効にすることができます。それは、フルページの更新を回避し、サーバーがすべての可能なカテゴリとサブカテゴリが移入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を移入するために、上記の例を変更し、$('#cat option:selected').val()に基づいて#subcatできます

最初のオプションは、サーバーを持っているでしょうが反応して、以下のようなものが含まれます。以下のような何か：DD1 IDで

$("#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が途切れるとフォームを無駄にします。 –

方法 - 最初のダイナミックドロップダウンを2番目のドロップダウンから選択する必要がありますか？

答えて

関連する問題