Question

假设我有这样的HTML代码：

<div class='row'>
    <div class='col-md-12'>
        <div class='section1'>
            <select name='language[]' class='language' id='language'>
                <option>English</option>
                <option>Mandarin</option>
                <option>Others</option>
            </select>
        </div>
        <div class='section2'>
            <select name='status[]' class='status'>
                <option>Active</option>
                <option>Pasive</option>
            </select>
        </div>
        <div class='section3 append_here'></div>
    </div>
    <div class='col-md-12'>
        <div class='section1'>
            <select name='language[]' class='language' id='language'>
                <option>English</option>
                <option>Mandarin</option>
                <option>Others</option>
            </select>
        </div>
        <div class='section2'>
            <select name='status[]' class='status'>
                <option>Active</option>
                <option>Pasive</option>
            </select>
        </div>
        <div class='section3 append_here'></div>
    </div>
</div>

我的代码的目的是，当语言为English时，它会显示另一个分数字段。当语言为Others时，它将显示（追加）另一个字段以输入语言

我在我的jquery上试过这样的事情：

$("body").on("change", "#language", function(){
    var value = $(this).val();
    if(value == 'English'){
        var input = `<input type='text' placeholder='input your score here !'>`;
        $(this).next('.append_here').show().html(input);
    }else if(value == 'Others'){
        var input = `<input type='text' placeholder='input your language here !'>`;
        $(this).next('.append_here').show().html(input);
    }else{
        $(this).next('.append_here').hide().empty();
    }
});

当我只使用一个select language option时，我没有问题，问题是，如果select language option多于一个，html()函数适用于所有字段。 ...

任何帮助都将非常感激

谢谢btw

Answer 1

您的代码中存在一些选择器问题。查看下面的更新代码段。

$("body").on("change", "#language", function(){
    var value = $(this).val();
    
    if(value == 'English'){
        var input = "<input type='text' placeholder='input your score here !'>";
        $('.append_here').show().html(input);
    }else if(value == 'Others'){
        var input = "<input type='text' placeholder='input your language here !'>";
        $('.append_here').show().html(input);
    }else{
        $('.append_here').hide().empty();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='col-md-12'>
    <div class='section1'>
        <select name='language[]' class='language' id='language'>
            <option>English</option>
            <option>Mandarin</option>
            <option>Others</option>
        </select>
    </div>
    <div class='section2'>
        <select name='status[]' class='status'>
            <option>Active</option>
            <option>Pasive</option>
        </select>
    </div>
    <div class='section3 append_here'></div>
</div>

Answer 2

在这里你举个例子：您不应该使用相同的id的使用类，然后获取当前元素的索引。

＆＃13;

$("body").on("change", ".language", function(){
    var index = $(this).index(".language");
    var value = $('.language:eq( '+index+' )').val();

    if(value == 'English'){
        var input = `<input type='text' placeholder='input your score here !'>`;
        $('.append_here:eq( '+index+' )').show().html(input);
    }else if(value == 'Others'){
        var input = `<input type='text' placeholder='input your language here !'>`;
        $('.append_here:eq( '+index+' )').show().html(input);
    }else{
        $('.append_here:eq( '+index+' )').hide().empty();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row'>
  <div class='col-md-12'>
    <div class='section1'>
      <select name='language[]' class='language' id='language1'>
        <option>Choose language</option>
        <option>English</option>
        <option>Mandarin</option>
        <option>Others</option>
      </select>
    </div>
    <div class='section2'>
      <select name='status[]' class='status'>
        <option>Active</option>
        <option>Pasive</option>
      </select>
    </div>
    <div class='section3 append_here'></div>
  </div>
  <div class='col-md-12'>
    <div class='section1'>
      <select name='language[]' class='language' id='language2'>
        <option>Choose language</option>
        <option>English</option>
        <option>Mandarin</option>
        <option>Others</option>
      </select>
    </div>
    <div class='section2'>
      <select name='status[]' class='status'>
        <option>Active</option>
        <option>Pasive</option>
      </select>
    </div>
    <div class='section3 append_here'></div>
  </div>
</div>

＆＃13;

如何使用MULTIPLE选择选项在不同的Div Jquery中添加输入

2 个答案: