Change Text Box Value Based on Select Input with S

问题:

I am attempting to change the value of a text input based on the user selecting a value from a pulldown. I have got it working using the following,

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

This all work fine. What I am trying to achieve now is for the pre-selected item to show by default when the user re-visits the form if they wish to edit their choice. At the moment the select just defaults to 'Please Select...'. Is their anyway to force the select to show the value from the text input when the page loads?

Thanks

Chris

回答1:

Try this,

$(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">

回答2:

$(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

});      

Note

Instead of .live() use .on() with jQuery 1.7+, because live() is deprecated.

Syntax of .on() for delegate event handling is:

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

Where, StaticParent means the non-dynamic parent container of target element on which you want to bind event.

So, for above case it would be better to use any static parent of #name instead of document.

回答3:

$(document).ready(function() {                                       
    $("#name").live("change", function() {
      $("#firstname").val($(this).val());
    })
 }); ​

回答4:

Give this one a try: http://jsfiddle.net/ufomammut66/mw4dY/

Basically onload I'm just selecting an option by the value, setting it to selected and then calling the change event. Your change event takes care of the rest.

$(document).ready(function() {                                       
  $("#name").live("change", function() {
    $("#firstname").val($(this).find("option:selected").attr("value"));
  });
  $('#name option[value=Frank]').attr('selected','selected').change();
});

回答5:

Paste this code on $(document).ready

$("#name").val($("#firstname").val());

回答6:

$('#name').val($('#firstname').val());

回答7:

To remember the form values you can use cookie functions:

$(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 - if you revisit this page, the name will be set back as on the page leave.