選擇從 - >選擇到jquery

嗨，感謝您花時間回答我的問題。選擇從 - >選擇到jquery

我有一個具有兩個select元素的div（注意它們是動態創建的，沒有id）。他們都包含相同的選項元素（技能級別從1到5）。當用戶從SelectFrom下拉框中選擇某些內容時，第二個選項（「選擇至」）僅包含值大於「選擇自」選項中所選值的選項。

如果用戶在Select From下拉框中選擇默認元素（沒有值），我想用5個元素重新填充Select。

我想通了，我會有一個隱藏的選擇元素與所有5個選項，我會克隆這些，並重新填充選擇保險箱。

前進的方式是什麼。棘手的部分是，我沒有Id，所以我正在使用parent（）和siblings（）。感謝您的時間

假設這是HTML：

<div> 
<select class="skillsFrom"> 
<option value="">Please select a value</option> 
<option value="1">a</option> 
<option value="2">a</option> 
<option value="3">a</option> 
<option value="4">a</option> 
<option value="5">a</option> 
</select> 
<select class="skillsTo"> 
<option value="">Please select a value</option> 
<option value="1">a</option> 
<option value="2">a</option> 
<option value="3">a</option> 
<option value="4">a</option> 
<option value="5">a</option> 
</select> 
</div>

這裏的JS： // BTW helperSelect是使用相同的選項，因爲它只是隱藏其他兩個選擇。

('.skillsFrom').bind('change', function(){ 

      var $optionsSkillLevel = $('#helperSelect option').clone(); 

      var selectedValue = $(this).val(); 

      $(this).parent().siblings('.skillsTo').html($optionsSkillLevel); 

      if(selectedValue != ''){ 

      } 

     });

而且我卡住了。我不知道如何從這裏開始。我想迭代Select To中的所有元素並從Select中刪除那些低於選定值的元素。從

來源

2012-09-27 Dragan

什麼是您的DIV包括兩種選擇的具體HTML結構？ – devnull69

顯示標記和js也 – Jashwant

這是一個巨大的.jsp，所以我不能粘貼在這裏的HTML。我會做一個模擬 – Dragan

在第一次選擇的每次更改時，都需要隱藏/顯示第二個選項的某些選項。

$('.skillsFrom').change(function() { 
    var theValue = $(this).val(); 
    if($(this).val()==="") { 
     // show all values of .skillsTo if .skillsFrom select is set to "" 
     $(this).parent().find('.skillsTo option').show(); 
    } else { 
     theValue = parseInt(theValue, 10); 
     $(this).parent().find('.skillsTo option').each(function() { 
      if(parseInt($(this).val(), 10) <= theValue) { 
       // hide if value <= selected value from .selectFrom 
       $(this).hide(); 
      } else { 
       // show if value > selected value from .selectFrom 
       $(this).show(); 
      } 
     }); 
    } 
});

來源

2012-09-27 09:22:38 devnull69

」這個概率是我有X個這樣的容器div。 X個類別爲.skillsFrom和.skillsTo的select元素。這是行不通的，因爲你不會在DOM中上下選擇該特定div中的.skillsTo類的元素：/ – Dragan

請檢查已編輯的答案 – devnull69

這僅適用於第一次事件觸發skillFrom。然後它永遠不會更新相應的技能來選擇元素：/ – Dragan

你可以不喜歡它：

$('.skillsFrom').change(function() { 
    var val = this.value; 
    if(val == '') { 
    // your reload logic here 
    } 
    else { 
    $('.skillsTo option').hide().filter(function() { 
     return this.value != '' && parseInt(this.value, 10) > parseInt(val, 10); 
    }).show(); 
    } 
});

來源

2012-09-27 09:24:41 techfoobar

選擇從 - >選擇到jquery

回答

相關問題