jquery通过选择一个选项更新输入字段的值
jquery动态添加两个输入字段和一个选择字段。它应该更新名为“hidden_name”的字段中所选选项的值。它适用于静态字段,但不能按预期工作:jquery通过选择一个选项更新输入字段的值
jQuery(document).ready(function($) {
$("#add").click(function() {
var intId = $("#buildyourform div").length + 1;
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\" />");
var fName = $("<input type=\"text\" class=\"fieldname\" name=\"values[]\" />");
var fType = $("<select name=\"values\" class=\"extra_tab_list fieldtype\"> <optgroup label=\"Social Items\"><option value=\"fa-adn\" data-icon=\"fa-adn\">Adn</option> <option value=\"fa-android\" data-icon=\"fa-android\">Android</option> <option value=\"fa-apple\" data-icon=\"fa-apple\">Apple</option> <option value=\"fa-bitbucket\" data-icon=\"fa-bitbucket\">Bitbucket</option> <option value=\"fa-bitbucket-square\" data-icon=\"fa-bitbucket-square\">Bitbucket</option> <option value=\"fa-bitcoin\" data-icon=\"fa-bitcoin\">Bitcoin</option> <option value=\"fa-btc\" data-icon=\"fa-btc\">Btc</option> <option value=\"fa-css3\" data-icon=\"fa-css3\">Css3</option> <option value=\"fa-dribbble\" data-icon=\"fa-dribbble\">Dribbble</option> <option value=\"fa-dropbox\" data-icon=\"fa-dropbox\">Dropbox</option> <option value=\"fa-facebook-square\" data-icon=\"fa-facebook-square\">Facebook</option> <option value=\"fa-flickr\" data-icon=\"fa-flickr\">Flickr</option> <option value=\"fa-foursquare\" data-icon=\"fa-foursquare\">Foursquare</option> <option value=\"fa-github-square\" data-icon=\"fa-github-square\">Github</option> <option value=\"fa-gittip\" data-icon=\"fa-gittip\">Gittip</option> <option value=\"fa-google-plus-square\" data-icon=\"fa-google-plus-square\">Google Plus</option> <option value=\"fa-html5\" data-icon=\"fa-html5\">Html5</option> <option value=\"fa-instagram\" data-icon=\"fa-instagram\">Instagram</option> <option value=\"fa-linkedin-square\" data-icon=\"fa-linkedin-square\">Linkedin</option> <option value=\"fa-linux\" data-icon=\"fa-linux\">Linux</option> <option value=\"fa-maxcdn\" data-icon=\"fa-maxcdn\">Maxcdn</option> <option value=\"fa-pagelines\" data-icon=\"fa-pagelines\">Pagelines</option> <option value=\"fa-pinterest-square\" data-icon=\"fa-pinterest-square\">Pinterest</option> <option value=\"fa-renren\" data-icon=\"fa-renren\">Renren</option> <option value=\"fa-skype\" data-icon=\"fa-skype\">Skype</option> <option value=\"fa-stack-exchange\" data-icon=\"fa-stack-exchange\">Stack Exchange</option> <option value=\"fa-stack-overflow\" data-icon=\"fa-stack-overflow\">Stack Overflow</option> <option value=\"fa-trello\" data-icon=\"fa-trello\">Trello</option> <option value=\"fa-tumblr-square\" data-icon=\"fa-tumblr-square\">Tumblr</option> <option value=\"fa-twitter-square\" data-icon=\"fa-twitter-square\">Twitter</option> <option value=\"fa-vimeo-square\" data-icon=\"fa-vimeo-square\">Vimeo</option> <option value=\"fa-vk\" data-icon=\"fa-vk\">Vk</option> <option value=\"fa-waze\" data-icon=\"fa-waze\">Waze</option> <option value=\"fa-weibo\" data-icon=\"fa-weibo\">Weibo</option> <option value=\"fa-windows\" data-icon=\"fa-windows\">Windows</option> <option value=\"fa-xing-square\" data-icon=\"fa-xing-square\">Xing</option> <option value=\"fa-youtube-play\" data-icon=\"fa-youtube-play\">Youtube</option></optgroup><optgroup label=\"Misc\"><option value=\"fa-envelope\" data-icon=\"fa-envelope\">Email</option><option value=\"fa-phone-square\" data-icon=\"fa-phone-square\">Contact</option><option value=\"fa-address-card\" data-icon=\"fa-address-card\">Address</option><option value=\"fa-star\" data-icon=\"fa-star\">Custom</option></optgroup></select><input type=\"text\" class=\"hidden_name\" placeholder=\"Selected Value Will be Here\" name=\"hidden_values[]\" />");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(fType);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
$('.extra_tab_list').change(function() {
$(this).closest('.fieldwrapper').find('.hidden_name').val($('option:selected', this).data('icon'));
});
});
可以在此处看到工作示例; JsFiddle Demo
动态创建的元素,你必须使用.on("event", handler)
,而不是直接附着事件,所以代码更改为:
$(document).on('change','.extra_tab_list',function() {
$(this).closest('.fieldwrapper').find('.hidden_name').val($('option:selected', this).data('icon'));
});
,它应该工作。
约VS .event。对( '事件')之间的区别更多详细资料()检查此链接:Difference between .on('click') vs .click()
谢谢,这个解决方案也适用于我。谢谢你,莫斯塔法弟兄。 –
@ZubairMushtaq不客气,兄弟 –
使用委托模型
html--
<select name="hello" id="txtSelect">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</br>
Value:<input type="text" val="" id="selectedValOpt"/>
JS -
$(document).on('change','#txtSelect',function(event){
var selected = $('#txtSelect').val();
$('#selectedValOpt').val(selected);
console.log(selected)
})
谢谢,萨加!我有解决方案。非常感谢你。 –
代码工作只是在点击功能里面移动变化功能。 – Kanu
非常感谢。它工作正常。 –