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

Posted 2023-04-13

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

【英文标题】：how to set specific text to dropdown when i select a dropdown value in asp.net core?

【发布时间】：2020-07-19 05:25:00

【问题描述】：

我在 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>

【问题讨论】：

编辑您的问题并输入您的查看代码。

我更新了一个代码，现在你可以看到了

我正在从数据库中获取数据。您可以尝试使用静态数据

现在我更新一个问题，希望对你有帮助

我现在只有一个下拉字段，我再次使用 html 更新代码

【参考方案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>

【讨论】：

吉山的回答也不错，只是改变了选择的选项。

【参考方案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>