値の変更、オプションを選択し

Question

こんにちはから選択された場合（入力への書き込みは）

は、私は、次の入力

<input type="text" class="input-text" value="South Yorkshire" placeholder=" county" name="calc_shipping_state" id="calc_shipping_state"> 

を持って、私はそれを変更する必要がありますいくつかのオプションでドロップダウンを選択します。問題は、入力がデータベースで検証を行い、HTMLにアクセスできないということです。だから私は入力を隠して、選択されたオプションを入力に書き込むためにjQueryを使って選択オプションを追加しています。私はどのように非表示の入力に選択項目を選択して書き込むことができないのか分かりません。

.change()または.val()を使用していますか？

これは、選択を追加するコードです：

$('#calc_shipping_state_field').after("<p class='form-row form-row-wide' id='calc_shipping_state_field' id=''> <select name='' id='county_selected' class='' rel=''> <option value=''>Select a county…</option> <option value='BE'>Bedfordshire</option> <option selected='selected' value='BER'>Berkshire</option> <option value='BRI'>Bristol</option> <option value='BUCK'>Buckinghamshire</option> <option value='CA'>Cambridgeshire</option> <option value='CHES'>Cheshire</option> <option value='LN'>City of London</option> </select></p>"); 

私はデフォルト

<option selected='selected' value='BER'>Berkshire</option> 

で作る「バークシャー」オプションにselected='selected'を追加した、これは私が使用して試してみましたコードです.change（）は動作しません。

$("#county_selected").change(function() { 
    var county = $("select :selected").county(function() { 
    var txt = $(this).text(); 
    }).get(); 
    //add it to div 
    $('input.input-text').val('county'); 
    }); 

誰かが私を助けてくれることを願っています。

ありがとうございます！

Answer 1

find()を使用して、選択したオプションを取得してから.text()を呼び出すことができます。変更機能では、thisは選択を参照するため、再選択する必要はありません。

$("#county_selected").change(function() { 
    $('input.input-text').val($(this).find('option:selected').text()); 
}); 

上記のコードは、selectが追加された後に実行する必要があります。ご希望の場合は、親またはドキュメントに委任することができ、それが選択した後に実行する必要はありません追加されます。

$(document).on('change', '#county_selected', function(){ 
    $('input.input-text').val($(this).find('option:selected').text()); 
}); 

Answer 2

さて、あなたはJQuery replaceWith Methodを使用してこれを行うことができます。

$(document).ready(function() { 
    /* 
    * Make your new HTML ELEMENT 
    */ 
    var newHTMLelment = "<select name='calc_shipping_state'>"; 
     newHTMLelment += "<option value='01'>01</option>"; 
     newHTMLelment += "<option value='02'>02</option>"; 
     newHTMLelment += "</select>"; 
    /* 
    * Replace current HTML element with new one 
    */ 
    $("#calc_shipping_state").replaceWith(newHTMLelment); 

});