Question

我有一个选项，有一些选项，从php生成。我想获取所有选项文本并使用文本创建相等数量的div。在每个div上单击选择选项应更改为相应的选项。

$("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上单击选择选项应更改为相应的选项。

使用h1属性将每个选项的值存储在相应的data-*中：

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

然后将点击事件附加到使用h1从数据属性获取存储值的.data()元素，并选择相应的option：

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

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

更新了您的小提琴，Working fiddle here，现在您的选择选项将作为div添加到h1，并且当您点击h1代码时，相应的值将会设置为选择元素。

我猜这就是问题所在。

作为旁注，我使用jquery的.text()方法比较值。

＆＃13;

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

＆＃13;

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

＆＃13;

使用Div Click控制选择

3 个答案: