コントロールを使用してDivで選択します。

Question

私は、PHPから生成されたいくつかのオプションでselectを持っています。 すべてのオプションテキストを取得し、テキストと同じ量のdivを作成したいとします。 各divをクリックすると、選択オプションが対応するものに変更されます。

Not working Fiddle

$("select option").each(function() { 
 
    var text = $("select option").text(); 
 
    $("#sizes").append("<h1>" + text + "</h1>") 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sizes"></div> 
 
<select id="attribute155" class="super-attribute-select"> 
 
    <option value="197" price="0">XS</option> 
 
    <option value="198" price="0">S</option> 
 
    <option value="199" price="0">M</option> 
 
    <option value="200" price="0">L</option> 
 
</select>

Answer 1

私はすべてのオプションのテキストを取得し、テキスト

あなたが現在を使用する必要があるとのdivの同量を作成したいです参照するオブジェクト$(this)常に最初のオプションのテキストを返しますeach()代わりの$("select option").text()における現在のオプション：該当するものに変更する必要があり、それぞれに

var text = $(this).text(); 

は、選択オプションをクリックしDIV。その後

$("#sizes").append("<h1 data-value='" + value + "'>" + text + "</h1>"); 
________________________^^^^^^^^^^^^^^^^^^^^^^^^^^ 

.data()を使用して、データ属性から格納された値を取得h1要素にクリックイベントを添付しcorrespendingを選択：data-*属性を使用して

ストアcorrespanding h1内のすべてのオプションの値option：

$('body').on('click', '#sizes h1', function() { 
    var value = $(this).data('value'); 
    $("select").val(value).change(); 
}); 

希望します。あなたのフィドル、Working fiddle here、今あなたの選択オプションがdivh1としてSに追加され、また、あなたがH1タグをクリックすると、対応する値が設定されますを更新しました

$("select option").each(function() { 
 
    var text = $(this).text(); 
 
    var value = $(this).val(); 
 
    
 
    $("#sizes").append("<h1 data-value='" + value + "'>" + text + "</h1>") 
 
}); 
 

 
$('body').on('click', '#sizes h1', function() { 
 
    var value = $(this).data('value'); 
 
    $("select").val(value).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sizes"></div> 
 
<select id="attribute155" class="super-attribute-select"> 
 
    <option value="197" price="0">XS</option> 
 
    <option value="198" price="0">S</option> 
 
    <option value="199" price="0">M</option> 
 
    <option value="200" price="0">L</option> 
 
</select>

Answer 2

*$("select").change(function(e) { 
    var text = $(e.target).find(":selected").text(); 
    $("#sizes").append("<h1>" + text + "</h1>") 
});* 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="sizes"></div> 
<select id="attribute155" class="super-attribute-select"> 
    <option value="197" price="0">XS</option> 
    <option value="198" price="0">S</option> 
    <option value="199" price="0">M</option> 
    <option value="200" price="0">L</option> 
</select> 

Answer 3

select要素内にあります。

私はそれが質問だったと思います。

私は.text()のjqueryメソッドを使って値を比較しています。

$("select option").each(function() { 
 
    var text = $(this).text(); 
 
    $("#sizes").append("<h1>" + text + "</h1>") 
 
}); 
 

 
$("#sizes>h1").click(function(event) { 
 

 
    var h1elemval = $(event.currentTarget).text(); 
 
    //alert(h1elemval); 
 
    $("#attribute155 option").each(function(index, item) { 
 
    item.selected = false; 
 

 
    if ($(item).text() === h1elemval) { 
 
    // console.log($(item).text()); 
 
     item.selected = true; 
 
    } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sizes"></div> 
 
<select id="attribute155" class="super-attribute-select"> 
 
    <option value="197" price="0">XS</option> 
 
    <option value="198" price="0">S</option> 
 
    <option value="199" price="0">M</option> 
 
    <option value="200" price="0">L</option> 
 
</select>