根据选择的属性更改文本框的值

Question

我试图根据用户从下拉菜单中选择的值来更改文本输入框的值。我已经使用以下代码实现了这个功能：

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

所有都很好。现在我想要实现的是，如果用户希望编辑他们的选择，则预选项将默认显示在重新访问表单时。目前，选择只会默认为“请选择...”。是否有任何方法可以强制选择在页面加载时显示文本输入中的值？

谢谢

Chris

- user1098178

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

- Adil

---

现在检查一下，这是你想要的吗？ - Adil

抱歉，无论是默认值还是实时更改，它似乎都无法正常工作。 - user1098178

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

});      

注意

在使用jQuery 1.7+时，请使用.on()代替.live()，因为live()已被弃用。

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

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

在这里，“StaticParent”表示您想要绑定事件的target元素的非动态父容器。

因此，在上述情况下，最好使用#name的任何静态父级而不是document。

- thecodeparadox

Answer 3

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

- Ümit KOL

---

从 jQuery 1.7 开始，.live() 方法已被弃用。请使用 .on() 来附加事件处理程序。 - StuartQ

Answer 4

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

基本上，在onload事件中，我只是通过值选择一个选项，将其设置为已选，并调用change事件。您的change事件会处理其余部分。

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

- ZapRowsdower910

Answer 5

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

- Pedro Estrada

Answer 6

为了记住表单值，您可以使用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 - 如果您重新访问此页面，名称将被设置为离开页面时的名称。

- Stano

Answer 7

将此代码粘贴到$(document).ready中。

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

- rahul