Question

我正在使用Shopify，但是如果您没有使用它，我的问题应该可以在javascript中回答，如果您有Shopify知识，那就太好了。

我有一个选项选项。每当选择一个选项时，我希望显示该选项。需要根据用户选择的内容不断更新。我不知道如何使用javascript实现这一目标。

<select name="car" id="select">

  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>

</select>
<select name="color" id="select-one">

  <option value="volvo">Red</option>
  <option value="saab">Oj</option>
  <option value="mercedes">Purp</option>
  <option value="audi">Black</option>

</select>
<div class="show">
Here is the option you selected, with the Color: 
"Car" "Color"
</div>

Answer 1

首先不要在两个选择框中复制id。其次你可以像这样使用javascript的onchange事件：

<select name="car" class="car">

  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>

</select>
<select name="color" class="color">

  <option value="volvo">Red</option>
  <option value="saab">Oj</option>
  <option value="mercedes">Purp</option>
  <option value="audi">Black</option>

</select>
<div class="show">
Here is the option you selected, with the Color: 
"<div id="selected_car">Car</div>" "<div id="selected_color">Color</div>"
</div>

<script>
$('select').change(function(){
    if($(this).hasClass('car')){
        $('#selected_car').html("");
        $('#selected_car').html($('option:selected',this).text());
    }else{
        $('#selected_color').html("");
        $('#selected_color').text($('option:selected',this).text());
    }
});
</script>

Answer 2

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>
    $(document).ready(function () {

        $('select').change(function () {
            szData = " Here is the option you selected, with the Color: " + $('#select').val() + '---' + $('#select-one option:selected').text();
            $('div.show').html(szData)
        });
    });
</script>
</head>
<body>

    <div class="show">
Here is the option you selected, with the Color: 
"Car" "Color"
</div>
  <select name="car" id="select">

  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>

</select>
<select name="color" id="select-one">

  <option value="volvo">Red</option>
  <option value="saab">Oj</option>
  <option value="mercedes">Purp</option>
  <option value="audi">Black</option>

</select>

</body>
</html>

听取选择菜单并显示结果：Javascript

2 个答案: