Question

假设我有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>

的Javascript

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

JS Fiddle

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

我只想要每个<select>代码更改，根据id

通过div显示结果

像这样：

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

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

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

在我的例子中，我写的代码不起作用，你能帮我吗？

提前谢谢

Answer 1

这应该做你想要的：

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

jsFiddle Demo

参考文献：

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

Answer 2

试试这段代码。

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

Answer 3

在这种情况下，我建议你应该使用html的data-属性将相关的div id传递给change事件并获取该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>

jquery .change内循环

3 个答案: