如何處理不同的動態組合框？

的Html如何處理不同的動態組合框？

<div id="opts" class="styled-select"> 
<select id="combo1" class="combo" data-index="1"> 
     <option></option> 
     <option val="Opt1">Opt1</option> 
     <option val="Opt2">Opt2</option> 
     <option val="Opt3">Opt3</option> 
    </select> 
</div> 



<div id="opts2" class="styled-select"> 
    <select id="combo2" class="combo2" data-index="1"> 
      <option></option> 
      <option val="Opt11">Opt11</option> 
      <option val="Opt22">Opt22</option> 
      <option val="Opt32">Opt33</option> 
     </select> 
</div>

jQuery的

$('#opts').on('change', '.combo', function() { 
    var selectedValue = $(this).val(); 

    if ($(this).find('option').size() > 2) { 
     var newComboBox = $(this).clone(); 
     var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10); 
     var newComboBoxIndex = thisComboBoxIndex + 1; 

     $('.parentCombo' + thisComboBoxIndex).remove(); 

     if (selectedValue !== '') { 
      newComboBox.attr('data-index', newComboBoxIndex); 
      newComboBox.attr('id', 'combo' + newComboBoxIndex); 
      newComboBox.addClass('parentCombo' + thisComboBoxIndex); 
      newComboBox.find('option[val="' + selectedValue + '"]').remove(); 
      $('#opts').append(newComboBox); 
     } 
    } 
});

我不能複製/使用2個不同的組合框相同的代碼，它似乎引起某種麻煩。

如何爲2個組合框具有相同的「效果」？

乾杯。

來源

2013-01-02 pleaseDeleteMe

您是否嘗試過使用'類= 「二合一」'你的第二個選擇？ –

是的，但沒有工作。你也可以在這裏嘗試一下：http://jsfiddle.net/JaVVe/6/ – pleaseDeleteMe

那麼你想要達到什麼目的？我看到的元素被克隆和追加 –

克隆元素也克隆它的屬性，我在你的代碼中做了一些改變！檢查他們，看看我有什麼改變:)我把他們包裹在一個div和更多的東西！

的Jquery：

$('body').on('change', '.combo', function() { 
    var selectedValue = $(this).val(); 

    if ($(this).find('option').size() > 2) { 
     var newComboBox = $(this).clone(); 
     var thisComboBoxIndex = $(this).attr('id').replace("combo", ""); 
     var newComboBoxIndex = thisComboBoxIndex + 10; 

     $('.parentCombo' + thisComboBoxIndex).remove(); 

     if (selectedValue != '') { 
      newComboBox.attr('data-index', newComboBoxIndex); 
      newComboBox.attr('id', 'combo' + thisComboBoxIndex); 
      newComboBox.find('option[val="' + selectedValue + '"]').remove(); 
      $('div.'+thisComboBoxIndex).append(newComboBox); 
     } 
    } 
});

HTML：

<div class="1"> 
    <select id="combo1" class="combo" data-index="1"> 
     <option></option> 
     <option val="Opt1">Opt1</option> 
     <option val="Opt2">Opt2</option> 
     <option val="Opt3">Opt3</option> 
    </select> 
</div> 
<br> 
<div class="2"> 
    <select id="combo2" class="combo" data-index="2"> 
     <option></option> 
     <option val="Opt1">Opt1</option> 
     <option val="Opt2">Opt2</option> 
     <option val="Opt3">Opt3</option> 
    </select> 
</div>

Working Fiddle

來源

2013-01-02 11:33:48

以上答案工作100％，但你必須檢查我用我的方法，並澄清自己:) :) D –

更新：我發現了腳本中的錯誤，現在調試它抱歉：D –

關於「清洗」選項？ – pleaseDeleteMe

因爲你打電話給你的類選擇和選擇框兩個類功能是不同的，所以，你可以嘗試以下方法之一，

<select id="combo1" class="combo" data-index="1"> 
     <option></option> 
     <option val="Opt1">Opt1</option> 
     <option val="Opt2">Opt2</option> 
     <option val="Opt3">Opt3</option> 
    </select> 


    <select id="combo2" class="combo" data-index="1"> 
      <option></option> 
      <option val="Opt11">Opt11</option> 
      <option val="Opt22">Opt22</option> 
      <option val="Opt32">Opt33</option> 
     </select> 

$('body').on('change', '.combo', function() { 
    var selectedValue = $(this).val(); 

if ($(this).find('option').size() > 2) { 
    var newComboBox = $(this).clone(); 
    var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10); 
    var newComboBoxIndex = thisComboBoxIndex + 1; 

    $('.parentCombo' + thisComboBoxIndex).remove(); 

    if (selectedValue !== '') { 
     newComboBox.attr('data-index', newComboBoxIndex); 
     newComboBox.attr('id', 'combo' + newComboBoxIndex); 
     newComboBox.addClass('parentCombo' + thisComboBoxIndex); 
     newComboBox.find('option[val="' + selectedValue + '"]').remove(); 
     $('body').append(newComboBox); 
    } 
} 
});

或您可以使用多個類選擇選項

$('body').on('change', '.combo,.combo2', function() { 
     var selectedValue = $(this).val(); 

    if ($(this).find('option').size() > 2) { 
     var newComboBox = $(this).clone(); 
     var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10); 
     var newComboBoxIndex = thisComboBoxIndex + 1; 

     $('.parentCombo' + thisComboBoxIndex).remove(); 

     if (selectedValue !== '') { 
      newComboBox.attr('data-index', newComboBoxIndex); 
      newComboBox.attr('id', 'combo' + newComboBoxIndex); 
      newComboBox.addClass('parentCombo' + thisComboBoxIndex); 
      newComboBox.find('option[val="' + selectedValue + '"]').remove(); 
      $('body').append(newComboBox); 
     } 
    } 
    });

來源

2013-01-02 11:18:34 Sibu

謝謝，對不起，我更新了代碼，你能檢查它嗎？我的方法正確嗎？ – pleaseDeleteMe

類名和Id的設置是問題。

$('body').on('change', '.combo', function() { 
    var selectedValue = $(this).val(); 

if ($(this).find('option').size() > 2) { 
    var newComboBox = $(this).clone(); 
    //I incremented the index so the new element would have a unique id and class 
    var thisComboBoxIndex = parseInt($(this).attr('data-index')) + 1; 
    var newComboBoxIndex = thisComboBoxIndex + 1; 

    $('.parentCombo' + thisComboBoxIndex).remove(); 

    if (selectedValue !== '') { 
     newComboBox.attr('data-index', newComboBoxIndex); 
     newComboBox.attr('id', 'combo' + thisComboBoxIndex.toString()); 
     newComboBox.addClass('parentCombo' + thisComboBoxIndex.toString()); 
     newComboBox.find('option[val="' + selectedValue + '"]').remove(); 
     $('body').append(newComboBox); 
    } 
} 
});

DEMO：http://jsfiddle.net/2zNRu/1/

來源

2013-01-02 11:20:35

您可以在on功能使用多功能..

$('body').on('change', '.combo,.combo2', function() {

，以確保您的克隆元素都有唯一的ID，並dat_index ...我incresed的它的價值

var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10) + 1; //here

這裏是fiddle

來源

2013-01-02 11:32:45 bipen

如何處理不同的動態組合框？

回答

相關問題