Question

我正在使用AJAX和PHP获取带有教育数据的对象数组。最多可以显示4个不同的<select></select>标记。如何为每个选择设置正确的选项并删除副本？

我试过这个，导致副本：

<div class="col-md-3">
    <label>Levels</label>
    <div class="form-group form-group-custom">
        <select type="text" class="form-control" placeholder="Degree..." id="userEducationDegree educationCount + '" name="userEducationDegree[]">
            <option value="' +data.degree_name + '">' + data.degree_name + '</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>

然后我尝试用JS删除副本，这只适用于第一个选择标记：

    var usedDegrees = {};
    $("select[name='userEducationDegree[]'] > option").each(function () {
        console.log("removing");
        if(usedDegrees[this.text]) {
            $(this).remove();
        } else {
            usedDegrees[this.text] = this.value;
        }
    });

我对上述设置的当前输出是：

        <option value="A">A</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>

我希望移除<option value="A">A</option>之一或选择<option>。

Answer 1

根据您的要求

我想是A之一删除或被选中。

我们可以根据学位名称选择选项。为此，您可以尝试此代码

HTML：

<div class="col-md-3">
    <label>Levels</label>
    <div class="form-group form-group-custom">
        <select type="text" class="form-control" placeholder="Degree..." id="userEducationDegree educationCount + '" name="userEducationDegree[]">
           <option value="Select">Select</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>
        </div>

js代码会像那样

//让degree_name =＆＃39; B＆＃39;;

 var degree_name='B';
        $("select[name='userEducationDegree[]'] option").each(function () {

            if(degree_name===this.value) {
                this.selected=true;
            } 
        });

希望它对您有用。

Answer 2

您不需要像您一样选择更正的值。复制选项来自您的选择，这不是必需的。

只需使用以下行，它就会自动选择带有匹配字符串的value。

<强> Jquery的

    $("select[id^='userEducationDegree']").val('A'); 

// in your case it should be data.degree_name instead of 'A'

以下是代码段

$(function(){
   $("select[id^='userEducationDegree']").val('A');
  $("#sel").html('`'+$("select[id^='userEducationDegree']").val()+'`');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select type="text" class="form-control" placeholder="Degree..." id="userEducationDegree educationCount + '" name="userEducationDegree[]">
            <option value="-1">--Select--</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
</select>
<p>See <strong id="sel"></strong> is selected</p>

如何为具有相同名称的select设置所选选项？

2 个答案: