当我在 asp.net 核心中选择下拉值时，如何将特定文本设置为下拉列表？

Question

我在 asp.net 核心中有一个带有国家名称和代码的下拉菜单。我需要，当我选择一个下拉值时，它应该在下拉列表中设置一个唯一的代码。我有一个截图，你可以看到，

screen Shot

现在我有第二个屏幕截图，我想在选择值后喜欢这个下拉菜单。 second Screen Shot

我的视图下拉代码是

    <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

在这个解决方案中，我们将 Country 文本包装在 span 标签内。每当我们单击下拉菜单时，都会使用 Country 属性填充 span 标签。选择完一个选项后，这将清空 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("");
    });
  });
});

---

下面的演示；

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

Answer 2

你能试试这个吗？

这个非常简单易懂而且速度更快。

请查看此链接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>