jQuery 根据具有选定属性的选择输入更改文本框值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11847643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Text Box Value Based on Select Input with Selected Attribute
提问by user1098178
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
克里斯
采纳答案by Adil
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">回答by thecodeparadox
$(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.
而不是与 jQuery 1.7+ 一起.live()使用.on()，因为live()已弃用。
Syntax of .on()for delegate event handling is:
.on()for 委托事件处理的语法是：
$(StaticParent).on( eventName, target, handlerFunction );
Where, StaticParentmeans the non-dynamic parent container of targetelement on which you want to bind event.
其中，StaticParent表示target要在其上绑定事件的元素的非动态父容器。
So, for above case it would be better to use any static parent of #nameinstead of document.
因此，对于上述情况，最好使用 的任何静态父代#name而不是document.
回答by ShortRound1911
Give this one a try: http://jsfiddle.net/ufomammut66/mw4dY/
试试这个：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.
基本上 onload 我只是通过值选择一个选项，将其设置为 selected 然后调用更改事件。您的更改事件会处理其余的事情。
$(document).ready(function() {
$("#name").live("change", function() {
$("#firstname").val($(this).find("option:selected").attr("value"));
});
$('#name option[value=Frank]').attr('selected','selected').change();
});
回答by ümit KOL
$(document).ready(function() {
$("#name").live("change", function() {
$("#firstname").val($(this).val());
})
}); ?
回答by Pedro Estrada
$('#name').val($('#firstname').val());
回答by rahul
Paste this code on $(document).ready
将此代码粘贴到 $(document).ready
$("#name").val($("#firstname").val());
回答by Stano
To remember the form values you can use cookie functions:
要记住表单值，您可以使用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- if you revisit this page, the name will be set back as on the page leave.
jsfiddle- 如果您重新访问此页面，名称将设置回页面离开时的名称。
