如何根据数组值选中动态添加的下拉框中匹配的选项

看起来你的代码里有几个关键问题导致无法实现预期效果，我帮你拆解一下并给出修复后的版本：

主要问题点 #

• 事件重复绑定：你把mynewButton的点击事件绑定放在了for循环里，这会导致循环三次后，按钮被绑定了3次相同的事件，点击一次会执行三次回调，出现重复添加下拉框的问题。
• 闭包变量陷阱：用var声明的i在循环结束后会变成3，而且按钮点击是异步触发的，当回调执行时拿到的i已经不是循环时的数值了。
• 选项选中逻辑错误：你用$(this)[optionCounter]这种方式访问DOM元素是错误的，而且operatorString这个变量根本没定义，会直接报错中断代码执行。
• 缺少主动触发按钮点击的逻辑：你只是绑定了事件，但没有主动触发三次点击来添加三个下拉框。

修复后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row" id="bookForm" class="form-horizontal">
    <div class="form-group">
        <div class="col-md-2 button-div">
            <button type="button" class="mynewButton rule-button">Add New </button>
        </div>
    </div>
    <!-- The template for adding new field -->
    <div class="form-group hide" id="bookTemplate">
        <div class="row field-row">
            <div class="col-md-2">
                <select class="myDropdown" name="myDropdown">
                    <option value="Hello World">Hello World</option>
                    <option value="Javascript">Javascript</option>
                    <option value="Jquery">Jquery</option>
                </select>
            </div>
            <div class="col-md-1">
                <button type="button" class="removeButton">Remove</button>
            </div>
        </div>
    </div>
</div>

<script>
var myArryValues = [ "Hello World", "Javascript", "Jquery" ];
var bookIndex = 0;

// 先绑定事件，只绑定一次
$('#bookForm')
    .on('click', '.mynewButton', function(event, targetText) {
        bookIndex++;
        var bookForm = $('#bookForm');
        var $template = $('#bookTemplate'),
            $clone = $template
                .clone()
                .addClass('myDropdown-row')
                .removeClass('hide')
                .attr('data-book-index', bookIndex)
                .attr('id', '');
        
        bookForm.append($clone);
        
        // 更新name属性
        $clone.find('[name="myDropdown"]').attr('name', 'myDropdown[' + bookIndex + '].myDropdown');
        
        // 如果有目标文本，选中对应的选项
        if (targetText) {
            $clone.find('.myDropdown option').filter(function() {
                return $(this).text() === targetText;
            }).prop('selected', true);
        }
    })
    .on('click', '.removeButton', function() {
        $(this).parents('.form-group').remove();
    });

// 循环数组，主动触发三次按钮点击，每次传入对应的数组值
myArryValues.forEach(function(text) {
    $('.mynewButton').trigger('click', [text]);
});
</script>

关键改动说明 #

1. 事件绑定移到循环外：确保mynewButton的点击事件只绑定一次，避免重复执行回调。
2. 使用forEach循环触发点击：遍历数组时，每次触发按钮点击并传入当前的数组文本，这样回调里可以直接拿到要选中的文本。
3. 修正选项选中逻辑：通过filter找到文本匹配的选项，用prop('selected', true)来设置选中状态（注意这里用prop而不是attr，因为selected是DOM元素的属性，不是HTML属性）。
4. 统一管理bookIndex：把bookIndex提到循环外面，避免每次绑定事件时重置为0。
5. 移除无效代码：删掉了原代码中未定义的operatorString和逻辑错误的选项遍历代码。

这样修改后，页面加载完成后会自动添加三个下拉框，每个下拉框都会选中数组中对应的文本，点击Add New按钮也可以继续添加新的下拉框，Remove按钮也能正常删除对应的行。

内容的提问来源于stack exchange，提问作者YouNeverKnow