0

我需要帮助循环浏览我的 html 页面中的所有选择标签并在每次更改时运行一些函数

<div id="product_options">
     <label>Color</label>
     <select name="productOptions" id="colorOpt" style="margin-bottom:10px;">
          <option value="1">White</option>
          <option value="3">Blue</option>
     </select>
     <label>Size</label>
     <select name="productOptions" id="sizeOpt" style="margin-bottom:10px;">
         <option value="2">9oz</option>
         <option value="4">10oz</option>**strong text**
     </select>
</div>

主 div 内的所有内容都是可变的，包括标签、名称和 id

我想要做的是有人更新任何一个选定的选项，我需要弄清楚他们选择了哪个选择元素并获得价值。因此，例如，如果他们将颜色选项更新为蓝色，我需要在 jquery 中触发调用以显示带有 id colorOpt 的选择元素已更新为 3

关于如何做到这一点，我完全失去了任何想法。从这个开始，但不确定它是否正确

$('#product_options').select("select").each(function(selected, index) {


});
4

3 回答 3

2

看起来您开始认为您需要遍历每个选择...但是既然您说您需要“弄清楚他们选择了哪个选择元素”，您可以依赖回调中的this关键字。change

小提琴：http: //jsfiddle.net/vpqh3kjz/

代码：

// Every time someone updates either selected option fire a callback
$('#product_options select').change(function () {
    // `this` represents the element that changed
    var id = this.id;
    var value = this.value;

    // Do something with your data here
    console.log('select element id ' + id + ' was updated with ' + value);
});
于 2014-11-20T23:28:42.603 回答
1 
$('select').on('change',function(){
   var value = $(this).val();
   alert(value);
});
于 2014-11-20T23:24:29.803 回答
0

只是为了帮助像我这样的人解决这个问题。

我搜索了一个脚本，我可以用它来根据选定的值附加一些东西。

这是我想出的。JSFIDDLE

在选择字段值更改时附加代码，然后可以将值中的内容用于循环以在特定容器中附加该数量的标签。

注意：如果您的选项值不是数字，这可能会给您一个错误。

// Every time someone updates selected option fire a callback
$('#product_options select').change(function () {
    var container = $('#container');
    container.empty();
    for(var i = 0; i< this.value; i++){
        container.append('<p> index: '+ i +" <br> value: "+ this.value +'</p>');
    }
});
于 2018-08-13T06:55:21.360 回答