jquery .change inside loop

jquery .change inside loop

本文关键字：loop inside change jquery      更新时间：2023-09-26

假设我有这个code

.HTML 

<select id="id1">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
<select id="id2">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
<select id="id3">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>

爪哇语

var i;
for (i = 1; i <= 3; i++) {
$('#id'+[i]).change(function(){
    $("#result"+[i]).html('<p>Number</p>'+[i]);                 
  });
}

JS小提琴

不同的<select> id和不同的结果<div> id通环

我只想，每个<select>标签更改，根据id通过div 显示结果

喜欢这个：

<select> id1更改为 b，然后div1显示 b

<select> id2更改为 c，则div2显示 c

<select> id3更改为 a，则div3显示

在我的示例中，小提琴，我编写的代码不起作用，你能帮我吗？

提前谢谢你

这应该可以做你想要的：

var i, j;
$('select').change(function(){    
    i = this.id.slice(2);
    j = this.value;
    $("#result"+i).html('<p>Number: '+j+'</p>');
});

jsFiddle 演示

引用：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

试试这段代码。

var i;
for (i = 1; i <= 3; i++) {
$('#id'+i).change((function(a){
            return function()
            {                   
                $("#result"+a).html('<p>Number '+a+'</p>');
            };  
        })(i));   
}

并将select元素 ID 更改为 id1 、 id2 、 id3

在这种情况下，我建议您使用 html 的data-属性将相关的div id 传递给更改事件并获取该 id 并更改其 html。

尝试如下操作。

var i;
for (i = 1; i <= 3; i++) {
  $('#id' + [i]).change(function() {
    console.log($(this).attr("data-shouldupdate"));
    $("#" + $(this).attr("data-shouldupdate")).html('<p>Number</p>' + $(this).attr("data-shouldupdate"));
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="id1" data-shouldupdate="result1">
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>
<select id="id2" data-shouldupdate="result2">
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>
<select id="id3" data-shouldupdate="result3">
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>

相关文章：