Question

我有一个小项目，其中我有一个由JQuery UI插件提供的选择下拉菜单。下拉列表包含一个国家列表及其呼叫代码编号。有一种方法可以显示国家/地区名称和呼叫代码当选择值处于焦点时，选择处于焦点上并且仅显示调用代码。

这是代码

HTML

 <select class="form-control" id="cdropmovil" name="dropmovil"></select>

JavaScript功能

$.getJSON('../../Content/paises.json', function (json) {
                var countries = json.countries;
                countries.forEach(function (country) {
                    var opcion = '<option value="'+country.code+'">' + country.name + ' '
                + country.code + '</option>';
                    $("#cdropmovil").append(opcion);
                }, this);

这就是我明显没有尝试过的......

 $("#cdropmovil").on('change', function () {

            $(this).text($("#cdropmovil option:selected").val());
        })

Answer 1

修改选择框的DOM时，需要重新初始化或刷新JQuery SelectMenu：

$( "#cdropmovil" ).selectmenu( "refresh" );

这一行应该在你的forEach之后。

参考： http://api.jqueryui.com/selectmenu/#method-refresh

当您从UI中选择元素时，文本应在UI中自动更改。如果你想从回调中获取它以使用其他地方：

$("#cdropmovil").on('change', function () {

     var text = $(this).val();
     // Do whatever you want with text
});

Answer 2

您可以使用data-*属性存储每个option标记文本值。这样，如果您在option更改时更新value标记文字值，则文字值不会丢失。

您的$.getJSON(...)将被修改为

$.getJSON('../../Content/paises.json', function (json) {
     var countries = json.countries;
     countries.forEach(function (country) {
     //updated opcion variable
     var opcion = '<option data-country-code-name="'+country.name+' '+country.code+'"  value="'+country.code+'">' + country.name + ' '+ country.code + '</option>';
     $("#cdropmovil").append(opcion);
     }, this);

现在，您可以使用data-*属性值更改change()事件处理程序

上的文本

这是修改后的代码

$(document).ready(function(){
  $("body").on("focus","select",function(){
    $(this).children("option").each(function(){
      $(this).text($(this).data("country-code-name"));
    });
  });
  
  $("body").on("change","select",function(){
    var see = $("select option:selected").val();
    $("select option:selected").text(see);
    //This blur is added to remove focus on value select which was not commented link
    $(this).blur();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="countries">
  <option data-country-code-name="USA 1" value="1">USA 1</option>
  <option data-country-code-name="Africa 2" value="2">Africa 2</option>
  <option data-country-code-name="Switzerland 3" value="3">Switzerland 3</option>
  <option data-country-code-name="Germany 4" value="4">Germany 4</option>
  </select>

https://jsfiddle.net/weuydu6e/2/

更改

2 个答案: