как установить конкретный c текст для раскрывающегося списка, когда я выбираю раскрывающееся значение в asp. net ядро?

Question

У меня есть раскрывающийся список в asp. net ядре с названием страны и кодом. мне нужно, когда я выбираю раскрывающееся значение, чем оно должно быть установлено только код в раскрывающемся списке. У меня есть скриншот, который вы можете видеть,

Снимок экрана

Теперь у меня есть второй снимок экрана, я хочу, чтобы этот раскрывающийся список после выбора значения , второй снимок экрана

мой раскрывающийся код вида

    <select class="form-control" id="countryDropdown" >
    @foreach (var country in Model)
    {
        <option value="@country.id"
                data-code="@country.codeName">
            @country.Name
        </option>
    }
</select>

html раскрывающийся список

<select class="form-control" id="countryDropdown">
        <option value="3" data-code="93">
            Afghanistan (93)
        </option>
        <option value="264" data-code="">
            Åland Islands ()
        </option>
        <option value="4" data-code="355">
            Albania (355)
        </option>
        <option value="5" data-code="213">
            Algeria (213)
        </option>
        <option value="6" data-code="1">
            American Samoa (1)
        </option>
        <option value="7" data-code="376">
            Andorra (376)
        </option>
        <option value="8" data-code="244">
            Angola (244)
        </option>
        <option value="9" data-code="1">
            Anguilla (1)
        </option>
        <option value="266" data-code="">
            Anonymous Proxy ()
        </option>
        <option value="10" data-code="672">
            Antarctica (672)
        </option>
        <option value="11" data-code="1">
            Antigua and Barbuda (1)
        </option>
        <option value="12" data-code="54">
            Argentina (54)
        </option>
        <option value="13" data-code="374">
            Armenia (374)
        </option>
        <option value="14" data-code="297">
            Aruba (297)
        </option>
        <option value="268" data-code="">
            Asia/Pacific Region ()
        </option>
</select>

Answer 1

Вы можете попробовать это.

Это очень просто и легко понять и быстрее.

Пожалуйста, проверьте эту ссылку JsFiddle

Примечание: пожалуйста, раскомментируйте console.log для получения более подробной информации.

и Вы можете изменить этот код в соответствии с вашими требованиями здесь. Я высеиваю текущее отображение кода данных в раскрывающемся списке.

$(document).ready(function() {
 	$("#countryDropdown option:first").text($("#countryDropdown option:first").data("code"));
  $("#countryDropdown").change(function(event) 
  {
     var oCurrentOption =this.options[event.target.selectedIndex];
     $("#countryDropdown option[value="+oCurrentOption.value+"]").text($(oCurrentOption).data("code"));
     //console.log(oCurrentOption);
     //console.log("Data Code "+$(oCurrentOption).data("code"));
     //console.log("Current Text "+oCurrentOption.text);
     //console.log("Current Value "+oCurrentOption.value);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="countryDropdown">
        <option value="3" data-code="93">
            Afghanistan (93)
        </option>
        <option value="264" data-code="">
            Åland Islands ()
        </option>
        <option value="4" data-code="355">
            Albania (355)
        </option>
        <option value="5" data-code="213">
            Algeria (213)
        </option>
        <option value="6" data-code="1">
            American Samoa (1)
        </option>
        <option value="7" data-code="376">
            Andorra (376)
        </option>
        <option value="8" data-code="244">
            Angola (244)
        </option>
        <option value="9" data-code="1">
            Anguilla (1)
        </option>
        <option value="266" data-code="">
            Anonymous Proxy ()
        </option>
        <option value="10" data-code="672">
            Antarctica (672)
        </option>
        <option value="11" data-code="1">
            Antigua and Barbuda (1)
        </option>
        <option value="12" data-code="54">
            Argentina (54)
        </option>
        <option value="13" data-code="374">
            Armenia (374)
        </option>
        <option value="14" data-code="297">
            Aruba (297)
        </option>
        <option value="268" data-code="">
            Asia/Pacific Region ()
        </option>
</select>

Answer 2

В этом решении мы оборачиваем текст Country внутри тега span. Всякий раз, когда мы щелкаем по раскрывающемуся списку, он заполняет тег span свойством Country Когда вы закончите выбирать опцию, это приведет к очистке тега span.

Добавьте это в ваш скрипт;

$(document).ready(function() {
  $("#countryDropdown").find("option").each(function() {
    var codeIndex = $(this).text().indexOf("(");
    var country = $(this).text().substring(0, codeIndex);
    var code = $(this).text().substring(codeIndex);
    $(this).html("<span class='select-hide' data-country='" + country + "'></span>" + code);
  });

  $("#countryDropdown").focus(function() {
    $(this).find(".select-hide").each(function() {
      $(this).text($(this).data("country"));
    });
  });

  $("#countryDropdown").change(function() {
    $(this).blur();
  });

  $("#countryDropdown").blur(function() {
    $(this).find(".select-hide").each(function() {
      $(this).text("");
    });
  });
});

---

Demo ниже;

$(document).ready(function() {
  $("#countryDropdown").find("option").each(function() {
    var codeIndex = $(this).text().indexOf("(");
    var country = $(this).text().substring(0, codeIndex);
    var code = $(this).text().substring(codeIndex);
    $(this).html("<span class='select-hide' data-country='" + country + "'></span>" + code);
  });

  $("#countryDropdown").focus(function() {
    $(this).find(".select-hide").each(function() {
      $(this).text($(this).data("country"));
    });
  });

  $("#countryDropdown").change(function() {
    $(this).blur();
  });

  $("#countryDropdown").blur(function() {
    $(this).find(".select-hide").each(function() {
      $(this).text("");
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="form-control" id="countryDropdown">
  <option value="3" data-code="93">
    Afghanistan (93)
  </option>
  <option value="264" data-code="">
    Åland Islands ()
  </option>
  <option value="4" data-code="355">
    Albania (355)
  </option>
  <option value="5" data-code="213">
    Algeria (213)
  </option>
  <option value="6" data-code="1">
    American Samoa (1)
  </option>
  <option value="7" data-code="376">
    Andorra (376)
  </option>
  <option value="8" data-code="244">
    Angola (244)
  </option>
  <option value="9" data-code="1">
    Anguilla (1)
  </option>
  <option value="266" data-code="">
    Anonymous Proxy ()
  </option>
  <option value="10" data-code="672">
    Antarctica (672)
  </option>
  <option value="11" data-code="1">
    Antigua and Barbuda (1)
  </option>
  <option value="12" data-code="54">
    Argentina (54)
  </option>
  <option value="13" data-code="374">
    Armenia (374)
  </option>
  <option value="14" data-code="297">
    Aruba (297)
  </option>
  <option value="268" data-code="">
    Asia/Pacific Region ()
  </option>
</select>