如何使用jquery将多个选定值分配给文本字段
问题描述:
我想将多个选定值分配给不同的文本字段。如果我为四个不同的文本字段选择了四个选项分配值。如何使用jquery将多个选定值分配给文本字段
HTML代码
<select name="garden" multiple="multiple">
<option>Flowers</option>
<option>Shrubs</option>
<option>Trees</option>
<option>Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
<div></div>
<input type="text" id="opt1" />
<input type="text" id="opt2"/>
<input type="text" id="opt3" />
<input type="text" id="opt4" />
我做了什么样的jQuery代码
<script>
$("select")
.change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).text() + " ";
});
$("div").text(str);
});
})
.trigger("change");
</script>
请人帮助这一点。感谢贵公司
答
基于所选的选项指数id
值(你可以得到的索引值回调函数的each()
方法的第一个参数)和更新利用生成的id
选择元素的值。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="garden" multiple="multiple">
<option>Flowers</option>
<option>Shrubs</option>
<option>Trees</option>
<option>Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
<div></div>
<input type="text" id="opt1" />
<input type="text" id="opt2" />
<input type="text" id="opt3" />
<input type="text" id="opt4" />
<script>
$("select").change(function() {
var str = "";
$("select option:selected").each(function(i) {
str += $(this).text() + " ";
$('#opt' + (i + 1)).val($(this).text());
});
$("div").text(str);
})
.trigger("change");
</script>
的更好的方法将使用通用class
用于输入,您可以通过使用jQuery的:eq()
伪类选择指数得到元素。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="garden" multiple="multiple">
<option>Flowers</option>
<option>Shrubs</option>
<option>Trees</option>
<option>Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
<div></div>
<input type="text" class="opt" />
<input type="text" class="opt" />
<input type="text" class="opt" />
<input type="text" class="opt" />
<script>
$("select").change(function() {
var str = "";
$("select option:selected").each(function(i) {
str += $(this).text() + " ";
$('.opt:eq(' + i + ')').val($(this).text());
});
$("div").text(str);
})
.trigger("change");
</script>
UPDATE:为了限制选择的数量总是缓存在全局变量中选定的值,当选择的选项计数大于预期的恢复。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="garden" multiple="multiple">
<option>Flowers</option>
<option>Shrubs</option>
<option>Trees</option>
<option>Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
<div></div>
<input type="text" class="opt" />
<input type="text" class="opt" />
<input type="text" class="opt" />
<input type="text" class="opt" />
<script>
var sel;
$("select").change(function() {
var str = "",
$selected = $("select option:selected");
if ($selected.length > 4)
$(this).val(sel);
else
sel = $(this).val();
$selected.each(function(i) {
str += $(this).text() + " ";
$('.opt:eq(' + i + ')').val($(this).text());
});
$("div").text(str);
})
.trigger("change");
</script>
答
的解决方案是为,
使用trigger
在Jquery的
$("select option:selected").each(function(i) {
if(i <= 4) {
resVal += $(this).text() + " ";
$('#opt' + (i + 1)).val($(this).text());
}
});
$("div").text(resVal);
答
试试like。每次选择分配不同的文本框。增量每次click.It的计数器将匹配文本
var count=1;
$("select").change(function() {
var str = "";
$("select").each(function() {
str += $(this).val() + " ";
});
$("div").text(str);
$('#opt'+count).val(str);
count ++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="garden" multiple="multiple">
<option>Flowers</option>
<option>Shrubs</option>
<option>Trees</option>
<option>Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
<div></div>
<input type="text" id="opt1" />
<input type="text" id="opt2"/>
<input type="text" id="opt3" />
<input type="text" id="opt4" />
致谢
ids
兄弟..它的正常工作干得 – Rijo@Rijo:很高兴帮助:) –
@Rijo,如果它的正确解决方案..你可以标记为接受答案。 – Vikrant