jquery的複製到其它區域

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> 

如果我想的div HTML自動顯示選擇框的值，我會做一段代碼變更或者組件上？

感謝

李

Answer 1

如果你想的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，使被處理的selectboxes具有相同並將其目標存儲在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的事件對所有selectboxes。

Answer 2

你會通過change或bind功能使用上的選擇框change事件，在事件處理程序，你會打電話的html或text功能設置文本在相關div上，通過val（您的option元素不具有value屬性，因此val將代替他們的文本）獲取所選選項的值。在這兩種情況下，都可以通過$ (or jQuery)函數傳遞給第一個選擇框的CSS選擇器（例如，$("#first")）來查找元素。

Answer 3

你可以做這樣的事情，所以你就不必編寫代碼爲每個選擇/ DIV：

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

JSFiddle Example

Answer 4

你想一個代碼，在兩個工作嗎？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:

• Selectors
• .change()
• .eq()
• .index()
• .val()

Answer 5

如果您使用綁定到視圖/頁面的JavaScript支持對象，則還可以檢出knockout.js並實施MVVM（模型 - 視圖 - 視圖 - 模型）模式。