最初のドロップダウンに基づくブートストラップmultiselect動的オプション

-1

私のページには2つのドロップダウンがあり、1つは「都市」のための定期的な選択で、もう1つは各都市の「近所」のブートストラップを使ったマルチ選択です。最初のドロップダウンに基づくブートストラップmultiselect動的オプション

最初のドロップダウンで選択したオプションは、2番目のドロップダウンにオプションを設定します。私はすでに通常の選択で作業していますが、ブートストラップを使用するマルチセレクションでは、選択に基づいてオプションを変更することができません。

これは私が今しようとしているコードです - 私はそれを動作させることはできませんしかし、私はHEREから知ったリフレッシュを、使用してみました

var select_clone = $('<select>') 
    .html($('#p-nhb option')) 
    .hide() 
    .insertAfter('#p-nhb'); 

$('#p-city') 
    .change(function() { 
    $('#p-nhb').html(select_clone.find('[data-val="' + this.value + '"]').clone()); 
$('.multi-select').multiselect('refresh'); 
    }) 
    .change();

を。

出典

2017-12-14 Rich

PSA見つけるために - あなたがダウン質問を投票するつもりなら、あなたはおそらく、理由を説明する必要があります。 – Rich

笑。これは本当に簡単です。インデックスページに存在しないrebuildが不足しています。ちょうどCTRL + F hereそれ^ _^

$(function(){ 
 
\t \t var select_clone = $('<select>') 
 
\t .html($('#p-nhb option')) 
 
\t .hide() 
 
\t .insertAfter('#p-nhb'); 
 
\t \t 
 
\t \t $('#p-nhb').multiselect(); 
 
\t \t 
 
\t \t $('#p-city').change(function(){ 
 
\t \t \t $('#p-nhb').html(select_clone.find('[data-city="' + this.value + '"]').clone()); 
 
\t \t \t $('#p-nhb').multiselect('rebuild'); 
 
\t \t }).change(); 
 
\t \t 
 
\t \t $('#get').click(function(){ 
 
\t \t \t console.log('city: '+$('#p-city').val()+', neighborhood: '+$('#p-nhb').val().toString()); 
 
\t \t }); 
 
\t });

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"/> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" /> 
 
</head> 
 
<body> 
 

 
<select name="property_city" id="p-city"> 
 
\t <option value="" selected>all</option> 
 
\t <option value="a" >a</option> 
 
\t <option value="b" >b</option> 
 
\t <option value="c" >c</option> 
 
</select> 
 
<br> 
 
<select name="property_nhb[]" id="p-nhb" multiple> 
 
    <option data-city="" value="" selected>all</option> 
 
    <option data-city="a" value="a1">a1</option> 
 
    <option data-city="a" value="a2">a2</option> 
 
    <option data-city="a" value="a3">a3</option> 
 
    <option data-city="a" value="a4">a4</option> 
 
    <option data-city="b" value="b1">b1</option> 
 
    <option data-city="b" value="b2">b2</option> 
 
    <option data-city="b" value="b3">b3</option> 
 
    <option data-city="b" value="b4">b4</option> 
 
    <option data-city="c" value="c1">c1</option> 
 
    <option data-city="c" value="c2">c2</option> 
 
    <option data-city="c" value="c3">c3</option> 
 
    <option data-city="c" value="c4">c4</option> 
 
</select> 
 
<br> 
 
<button id="get">get value</button> 
 

 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script> 
 

 
</body> 
 
</html>

出典

2017-12-24 19:06:28 plonknimbuzz

ちょうどそれを試してみて、それは動作するようだ！私が変更しなければならなかったのは、コードにマッチする "data-val"と "data-city"と呼ばれるjs関数でした。 – Rich

マルチ選択値を変更していないはずです。私はあなたがmultiselectの代わりに＃p-nhbを使用しているのを見ます。また、変更イベントを2回トリガーしているのはなぜですか？

.html($('#p-nhb option')) 
    .hide() 
    .insertAfter('#p-nhb'); 

$('#p-city') 
    .change(function() { 
    $('.multi-select').html(select_clone.find('[data-val="' + this.value + '"]').clone()); 
$('.multi-select').multiselect('refresh'); 
    }) 
    .change();

出典

2017-12-14 15:16:23 blackmambo

よく理解するために、元の質問をリンクしました。限り、あなたの提案として、ありがとうが、それは何もしていない。 – Rich

これは役立つかもしれないfiddleです。

HTML：

<p> 
<select name="property_city" id="p-city"> 
    <option class="button" value="new-york-city" selected>New York City</option> 
    <option class="button" value="">All</option> 
    <option class="button" value="dallas-tx">Dallas, TX</option> 
    <option class="button" value="las-vegas">Las Vegas, NV</option> 
    <option class="button" value="los-angeles">Los Angeles, CA</option> 
    <option class="button" value="miami">Miami, FL</option> 
    <option class="button" value="new-york-city">New York City, NY</option> 
    <option class="button" value="san-francisco">San Francisco, CA</option> 
    <option class="button" value="seattle-wa">Seattle, WA</option> 
</select> 
</p> 

<p> 
<select name="property_nhb[]" id="p-nhb" multiple> 
    <option class="button">All</option> 
    <option data-val="los-angeles" value="beverly-hills" >Beverly Hills</option> 
    <option data-val="los-angeles" value="santa-monica" >Santa Monica</option> 
    <option data-val="miami" value="hialea" >Hialea</option> 
    <option data-val="miami" value="little-havana">Little Havana</option> 
    <option data-val="miami" value="north-miami">North Miami</option> 
    <option data-val="miami" value="south-beach">South Beach</option> 
    <option data-val="new-york-city" value="chelsea">Chelsea</option> 
    <option data-val="new-york-city" value="harlem">Harlem</option> 
    <option data-val="new-york-city" value="noho">NoHo</option> 
    <option data-val="new-york-city" value="soho">SoHo</option> 
</select> 
</p>

JS：

var select_clone = $('<select>') 
    .html($('#p-nhb option')) 
    .hide() 
    .insertAfter('#p-nhb'); 

    $('#p-city') 
     .change(function() { 

     $('#p-nhb').html(select_clone.find('[data-val="' + this.value + '"]').clone()); 
     $('#p-nhb').multiselect('refresh'); 
     }) 
     .change();

このことができますなら、私に教えてください。

出典

2017-12-20 18:12:47

それはフィドルで何もしませんでした。 – Rich

hidden属性を使用すると、利用できないオプションを非表示にすることができます。 data-* attributesを使用して、近隣の選択肢と市区町村の入力値の関係を設定します。

$("[name=city]").change(function() { 
 
    var city = $(this).val(); 
 
    $("[name=neighborhood] option[data-city]") 
 
    .attr("hidden", "hidden") 
 
    .filter(function() { 
 
     return $(this).data("city") == city; 
 
    }) 
 
    .removeAttr("hidden"); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 

 
<div class="form-group"> 
 
    <label for="city">City</label> 
 
    <select id="city" name="city" class="form-control"> 
 
    <option selected>Select city</option> 
 
    <option value="A">City A</option> 
 
    <option value="B">City B</option> 
 
    <option value="C">City C</option> 
 
</select> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="neighborhood">Neighborhoods</label> 
 
    <select id="neighborhood" name="neighborhood" class="form-control" multiple="multiple"> 
 
    <option value="1" data-city="A" hidden="hidden">Neighborhood A1</option> 
 
    <option value="2" data-city="A" hidden="hidden">Neighborhood A2</option> 
 
    <option value="3" data-city="A" hidden="hidden">Neighborhood A3</option> 
 
    <option value="4" data-city="B" hidden="hidden">Neighborhood B1</option> 
 
    <option value="5" data-city="B" hidden="hidden">Neighborhood B2</option> 
 
    <option value="6" data-city="C" hidden="hidden">Neighborhood C1</option> 
 
    <option value="7" data-city="C" hidden="hidden">Neighborhood C2</option> 
 
    </select> 
 
</div>

出典

2017-12-24 15:18:14 Alexander

これは、ブートストラップの複数選択ドロップダウンのためのものです。私は定期的な選択ドロップダウンのためにそれを行う方法を知っている、私の問題は、マルチブートストラップです。 – Rich

@ RichJ、あなたの[オリジナルの質問]（https://stackoverflow.com/q/47027361/7914637）では '＃p-nhb'選択コントロールのみが複数です。私の答えは2番目の選択タイプとは無関係に機能します（私のコードスニペットは更新されましたが、同様に動作します、再度実行しようとする可能性があります）。または、都市選択のために複数選択を使用したいですか？ – Alexander

最初のドロップダウンに基づくブートストラップmultiselect動的オプション

答えて

関連する問題