Javascript jquery显示与下拉列表不同的值

我有一个像这样的下拉列表

<select name="phoneCallingCode" id="phoneCallingCode" class="input">
   <option value="93">Afghanistan (+ 93)</option>
   <option value="355">Albania (+ 355)</option>
   <option value="213">Algeria (+ 213)</option>
</select>

当我选择一个值+93时，我只想在显示屏上显示+93，这可能是通过jquery实现的

提前谢谢

---

好的，据我所知，当有人在下拉列表中选择国家时，你们想显示数字

所以你可以这样做：

$('#phoneCallingCode').change(function() {

    $("option:selected", this).text($("option:selected", this).val());

});

但请记住，这也会更改所选选项文本，所以用户可能很难再次找到国家名称

小提琴：工作

代码

这意味着，获取所选下拉选项的值，并通过valNum变量中的值设置Textbox的值

当文档准备好后，您需要文本框中的控件号，以便页面开头的代码//使用如下所示

$('#phoneCallingCode').change(function() {
    $("#ShowNumber").val("+" +$("#phoneCallingCode option:selected").val())
});

HTML

---

您可以使用HTML5数据属性完成此任务，如下所示：

<select name="phoneCallingCode" id="phoneCallingCode" class="input" onclick="resetPhoneCallingCode()" onblur="displayContryCode();">
    <option value="93" data-text="Afghanistan (+ 93)">Afghanistan (+ 93)</option>
    <option value="355" data-text="Albania (+ 355)">Albania (+ 355)</option>
    <option value="213" data-text="Algeria (+ 213)">Algeria (+ 213)</option>
</select>

<script>
    function resetPhoneCallingCode() {
        $("#phoneCallingCode option").each(function () {
            $(this).text($(this).attr('data-text'));
        });
    }
    function displayContryCode() {
        $("#phoneCallingCode option:selected").text("+" + $("#phoneCallingCode").val());
    }
</script>

---

---

获取值并连接它！var result=+$phoneCallingCode.val！可能重复@Dhaval Marthak我必须在中显示display@Suganthan你说的展示是什么意思？你能详细说明一下吗？@Dhaval Marthak请看编辑你是对的，但必须保留下拉列表中的现有值不，你不能这样做。在将选定选项的文本更改为其值之前，必须将其存储在某个位置。让我看看我是否能提供这样的功能。我也在尝试accomplish@Abhishek，你看到OP的编辑了吗？@PratikJoshi是的，我看到了，当选择框打开时，可能必须使用数据文本属性来显示原始值，当选择框关闭时，显示值。textbox在意义上不在单独的textbox中，我想在问题的相同组件中，单独的文本框用于输入电话号码。你想在同一个下拉框中输入国家号码吗？@Suganthan，那么阿披实的解决方案有什么问题？请看阿披实的回答，但他们的“我想保留现有的下拉框”，而不是在单独的文本框中，我想要相同的内容。你能做一把小提琴以便更好地理解吗。这个答案与普拉蒂克的答案完全相似。@Abhishek我没有看到普拉蒂克发布相同的答案。@AmitAgrawal，你看到OP的编辑了吗：？你看到OP的编辑了吗？

<select name="phoneCallingCode" id="phoneCallingCode" class="input">
   <option value="93">Afghanistan (+ 93)</option>
   <option value="355">Albania (+ 355)</option>
   <option value="213">Algeria (+ 213)</option>
</select>
<input type="text" id="ShowNumber"/>

$('#phoneCallingCode').change(function(){
        var selectedOptionVal = $(this).val();
        var temp = "[value='"+selectedOptionVal+"']";
        var selected = $(temp).html();
        if (selected.indexOf("(+") != -1) {
            var selectedString     = selected.substring(selected.indexOf("(+")+1,selected.length-1);
            $(temp).html(selectedString);
        }
    });

<select name="phoneCallingCode" id="phoneCallingCode" class="input" onclick="resetPhoneCallingCode()" onblur="displayContryCode();">
    <option value="93" data-text="Afghanistan (+ 93)">Afghanistan (+ 93)</option>
    <option value="355" data-text="Albania (+ 355)">Albania (+ 355)</option>
    <option value="213" data-text="Algeria (+ 213)">Algeria (+ 213)</option>
</select>

<script>
    function resetPhoneCallingCode() {
        $("#phoneCallingCode option").each(function () {
            $(this).text($(this).attr('data-text'));
        });
    }
    function displayContryCode() {
        $("#phoneCallingCode option:selected").text("+" + $("#phoneCallingCode").val());
    }
</script>