Как установить выбранную опцию для выбора с тем же именем?

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; 
     } 
    }); 

Current выход, который у меня есть с вышеуказанной установкой:

 <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

По вашему требованию

Я хотел бы, что один из А удален или что выбран.

мы можем выбрать опцию согласно названию степени. для этого вы можете попробовать этот код

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 = 'B';

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

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

Надеюсь, что это сработает для вас.

Answer 2

Не нужно исправленное значение, как и вы. Опция duplicate исходит из вашего выбора, который не требуется.

Просто используйте строку ниже он будет автоматически выбирать value с матч строку.

Jquery

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

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

Здесь представлен SNIPPET

$(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>