Question

有一种简单的方法可以将值复制到其他区域

即。如果我有2或3个选择菜单或其他表单字段。

说

<select id=first>
<option>1</option>
<option>2</option>
</select>

<select id=second>
<option>3</option>
<option>4</option>
</select>

<div id=firstvalue></div>
<div id=secondvalue></div>

如果我希望divs html自动显示选择框的值，我是否需要在任一组件上进行一段代码更改？

由于

利

Answer 1

您想要一个代码同时使用吗？ Try this (example on jsFiddle)

$("select").change(function() // retrieve all `select` elements
   {
       // gets the corresponding `div`
       $("div").eq($(this).index())
           .html($(this).val()); // sets the html value of the `div` to
                                 // the selected value on the `select` element
   });

From jQuery docs:

Answer 2

您可以通过change或bind功能在选择框中使用change事件，并在事件处理程序中调用html或{ {3}}功能设置相关div上的文字，通过text获取所选选项的值（您的option元素没有value属性，因此{{1将取代他们的文本）。在这两种情况下，您都可以通过val函数在第一个选择框中传入CSS选择器（例如，val）来查找元素。

Answer 3

如果您希望div自动显示任何选择框的选定值，您可以使用以下jQuery：

$('#first').change(function(){ 
/* target the first selectbox with id #first and bind a change event to it */

    $('#firstvalue').html($(this).val()); 
    /* set the html of the div with id #firstvalue to the selected option*/

});

/* the same for the second selectbox */
$('#second').change(function(){

    $('#secondvalue').html($(this).val());

});

我建议您更改HTML，因此正在处理的选择框具有相同的类，并将其目标存储在data属性中。像这样：

<强> HTML

<select class="show_val" data-target="#value_1">
    <option>1</option>
    <option>2</option>
</select>

<div id="value_1"></div>

<强>的jQuery

$('.show_val').change(function(){

    $($(this).data('target')).html($(this).val());

}

这样您就可以对所有选择框使用相同的jQuery事件。

Answer 4

你可以这样做，所以你不必为每个select / div编写代码：

$('select').change(function() {
    $('div[id^="' + this.id + '"]').text($(this).val());
});

JSFiddle Example

Answer 5

如果您使用绑定到视图的JavaScript后备对象，您还可以查看knockout.js并实施 MVVM （模型 - 视图 - 视图 - 模型）模式/页。

jquery将值复制到其他区域

5 个答案: