JQuery UI选择菜单更改显示文本上的变化

我有一个小项目，其中我有一个由JQuery UI插件提供的选择下拉菜单。下拉列表中包含一个国家和他们的调用代码numbers.Is列表当选择对焦时，我会显示国家名称和通话代码，并只显示通话代码，当它与选定的值失焦时。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);

这里就是我明明试过unsuccesfully ...

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

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

来源

2016-05-16 user6321125

你想是这样的[https://jsfiddle.net/weuydu6e/](https://jsfiddle.net/weuydu6e/） –

没错！多数民众赞成在!!但选项按钮的内容变化！我会反正看，看看我能弄清楚。谢谢！ – user6321125

你想让我把它写成答案吗？ –

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

您$.getJSON(...)将得到修改，以

现在你可以使用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/

来源

2016-05-16 13:09:51

我修改了change（）事件处理程序，添加了$（this）.blur（）。现在它工作正常 –

当你修改你的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 
});

来源

2016-05-16 08:07:57

JQuery UI选择菜单更改显示文本上的变化

回答

相关问题