10

ユーザーがプルダウンから値を選択することに基づいて、テキスト入力の値を変更しようとしています。私はそれを以下を使用して動作させました、

<script type="text/javascript">  
     $(document).ready(function() {                                       
        $("#name").live("change", function() {
          $("#firstname").val($(this).find("option:selected").attr("value"));
        })
     });                                     
</script>

<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="" readonly="readonly">

これはすべて正常に機能します。私が今達成しようとしているのは、ユーザーが選択内容を編集したい場合に、ユーザーがフォームに再度アクセスしたときに、事前に選択されたアイテムがデフォルトで表示されるようにすることです。現時点では、選択はデフォルトで「選択してください...」になっています。とにかく、ページが読み込まれたときに、選択にテキスト入力からの値を表示するように強制しますか？

ありがとう

クリス

4

7 に答える 7

10

これを試して、

$(document).ready(function() {

    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);

    $("#name").live("change", function() {

        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">

于 2012-08-07T14:00:32.593 に答える
4 
$(document).ready(function() {   

  $(document).on("change", "#name", function() {

     $("#firstname").val( this.value ); // this.value is enough for you

  }).val( $('#firstname').val() ).change(); // for pre-selection trigger

});

ノート

非推奨であるため、jQuery1.7以降で.live()使用する代わりに。.on()live()

.on()デリゲートイベント処理の構文は次のとおりです。

$(StaticParent).on( eventName, target, handlerFunction );

ここで、は、イベントをバインドする要素StaticParentの非動的な親コンテナを意味しtargetます。

したがって、上記の場合は、の#name代わりにの静的な親を使用することをお勧めしますdocument。

于 2012-08-07T14:10:56.337 に答える
1 
$(document).ready(function() {                                       
    $("#name").live("change", function() {
      $("#firstname").val($(this).val());
    })
 }); ​
于 2012-08-07T14:09:14.460 に答える
1

これを試してみてください：http：//jsfiddle.net/ufomammut66/mw4dY/

基本的にonloadは、値でオプションを選択し、それをselectedに設定してから、changeイベントを呼び出すだけです。残りは変更イベントが処理します。

$(document).ready(function() {                                       
  $("#name").live("change", function() {
    $("#firstname").val($(this).find("option:selected").attr("value"));
  });
  $('#name option[value=Frank]').attr('selected','selected').change();
});
于 2012-08-07T14:15:34.413 に答える
0

このコードを貼り付けます$(document).ready 

$("#name").val($("#firstname").val());
于 2012-08-07T14:08:34.633 に答える
0 
$('#name').val($('#firstname').val());
于 2012-08-07T14:10:51.590 に答える
0

フォームの値を覚えておくために、Cookie関数を使用できます。

$(document).ready(function() {
    var value = readCookie('fname');
    if (value) {
        $("#firstname").val(value);
        $('#name option[value="'+value+'"]').prop('selected', true);
    }
    $("#name").on("change", function() {
        var value = $(this).find("option:selected").attr("value");
        $("#firstname").val(value);
        createCookie('fname',value,31);
    });
});

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

jsfiddle-このページに再度アクセスすると、名前はページを離れるときと同じように戻されます。

于 2012-08-07T14:40:10.533 に答える