JQuery UIの選択メニューが変更時にテキストを表示するように変更する

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); 

そして、ここでは私がunsuccesfully明らかにしようとしたものである

Answer 1

あなたは、各optionタグテキスト値を格納するdata-*属性を使用することができます。このようにしてoptionタグのテキスト値をvalueに変更すると、テキスト値が失われることはありません。

あなた$.getJSON(...)が

に変更されます今、あなたはchange()イベントハンドラ

上のテキストを変更するdata-*属性値を使用することができますここで変更されたコード

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

Answer 2

あなたのDOMを変更ボックスを選択し、あなたのjQueryのSelectMenuを再初期化または更新する必要があります：

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

この行は、あなたのforEachた後でなければなりません。

参考：あなたはUIから要素を選択すると、テキストがUIに自動的に変更する必要があり http://api.jqueryui.com/selectmenu/#method-refresh

。 あなたはどこか別の場所に使用するコールバックからそれを取るしたい場合：

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

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