根据与选择的属性选择输入更改文本框值(Change Text Box Value Based on

我试图改变文本输入的基础上，用户选择从下拉的值的值。 我有它的工作使用以下，

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

这一切都做工精细。 我试图现在实现的是对预选项目默认显示当用户再次访问的形式，如果他们想修改自己的选择。 此刻的选择只是默认为“请选择...”。 是他们无论如何强制选择显示来自文本输入页面加载时的价值？

谢谢

克里斯

Answer 1:

试试这个，

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

Answer 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

});      

注意

取而代之的.live()使用.on()使用jQuery 1.7+，因为live()已过时。

的语法.on()的委托事件处理：

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

其中， StaticParent指的非动态父容器target上要绑定事件元素。

因此，对于上述情况下，它会更好地使用任何静态父#name ，而不是document 。

Answer 3:

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

Answer 4:

给这一个尝试： http://jsfiddle.net/ufomammut66/mw4dY/

基本上onload事件我只是选择由值的选项，将它设置为选中状态，然后调用change事件。 你改变事件负责剩下的照顾。

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

Answer 5:

粘贴这个代码$(document).ready

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

Answer 6:

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

Answer 7:

要记住，你可以使用表单值的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 -如果你访问此页面，名字将被设置回为页面休假。

文章来源: Change Text Box Value Based on Select Input with Selected Attribute