使用jQuery和Select選項是否可能？

Question

我在數據庫中列出了國家及其地區代碼。 當選擇選擇選項時，我嘗試使用國家或地區代碼自動更新文本字段。

例如

<select name="country">
    <option value="CA" code="+1">Canada</option>
    ...
</select>

<input type="text" name="phone" />

我需要將CA值傳遞給腳本，用戶需要查看Canada。 基本上，我要問的是我是否可以創建一個新的選項code並讓jQuery更新我選擇的文本字段。

這可能嗎？ 還是有另一種方法可以做到這一點？

編輯： “代碼”應該是該國家的區號。 因此，例如，當用戶選擇加拿大時，文本字段phone將更新為+1。 我知道我可以將value設置為+1，然后使用.change()更新phone的.val()但是我需要當前值傳遞給處理它的腳本。

Answer 1

我建議您使用HTML5 data-屬性而不是自定義屬性：

<select name="country">
    <option value="CA" data-code="+1">Canada</option>
    ...
</select>

<input type="text" name="phone" />

然后將處理程序綁定到change事件：

$('select[name="country"]').change(function() {
    $('input[name="phone"]').val($(this).children('option:selected').data('code'));
});

或使用更少的jQuery：

$('select[name="country"]').change(function() {
    $('input[name="phone"]').val(this.options[this.selectedIndex].getAttribute('data-code'));
});

另一種選擇是在JavaScript中有一個country -> code映射

var map = {
    'CA': '+1',
    ...
};

然后查找代碼。

Answer 2

確保為每個元素分配一個ID。

var code = $('#country option:selected').attr('code');
$('#phone').val(code);

如果“代碼”不起作用。 使用“標題”。

Answer 3

不確定您要問的是什么，但這有幫助嗎？

$('select[name=country]').change(function() {

    $('input[name=phone]').val($(this).find('option:selected').attr('code'));

    alert('Do something else with this: ' + $(this).val());
});

Answer 4

$("select[name='country']").change(function() {
    $("input[name='phone']").val($(this).find('option:selected'));
});

你可以試試看 它綁定到選擇菜單更改事件，然后獲取“代碼”屬性值並為其輸入文本。