Question

我有这样的下拉列表

<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。

提前致谢。

enter image description here

Answer 1

好的，根据我的理解，当有人选择下拉国家时，你想显示号码。

所以你可以这样做：

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

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

});

但请记住，这也会更改所选的选项文字，因此用户可能很难再次找到国家/地区名称。

小提琴：http://jsfiddle.net/NyHts/

Answer 2

工作demo

代码

//For starting of page
  valNum=$("#phoneCallingCode").val();
   $("#nmbr").val(valNum);

$("#phoneCallingCode").change(function(){
   valNum=$(this).val();
   $("#nmbr").val(valNum);
});

表示获取所选下拉选项的值，并使用valNum变量中的值设置文本框的值。

当文档准备就绪时，你需要在文本框中输入数字，所以代码//用于开始页面

Answer 3

使用如下

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

HTML

<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"/>

DEMO

Answer 4

$('#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);
        }
    });

Answer 5

您可以使用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>

jquery显示下拉列表中的不同值

5 个答案: