jQuery：動態設置選項

我有兩個級聯下拉列表，父母和孩子。首先，它們都包含相同的值。當用戶從父母選擇框中選擇一個項目時，它會在子選擇中作爲選擇被刪除。

有時，父級選擇框只有3個項目，默認值和2個值。在這種情況下，當用戶選擇父值時，子選擇中唯一可能的選擇是剩餘的非默認值。

因此，當父母只有兩個值時，我想在用戶選擇父母選擇某項時自動選擇留在子框中的非默認值。

我開始使用HTML可能如下：

<select name="from" class="from"> 
<option value="" selected="selected" class="default">Select a value</option> 
<option value="na">One</option> 
<option value="ja">Two</option> 
</select> 
<select name="to" class="to"> 
<option value="" selected="selected" class="default">Select a value</option> 
<option value="na">One</option> 
<option value="ja">Two</option> 
</select>

然後，如果用戶選擇「一號」的父母，孩子選擇「二」選擇應該自動獲得。

這裏是我的jQuery我用它來從子刪除值時，選擇父值：

(function ($) { 
     function cascadeSelect(parent, child) { 
      var childOptions = child.find('option:not(.default)'); 
      child.data('options', childOptions); 
      parent.change(function() { 
       childOptions.remove(); 
       child.append(child.data('options').filter('.' + this.value)) 
        .change(); 
       if (child.data('options').length == 2) { 
        [select the last option here] 
       } 

      }) 

      if (parent.val()) { 
       childOptions.not('.default, .' + parent.val()).remove(); 
      } 

     } 


     $(function() { 
      cascadeForm = $('.askform'); 
      pulldown_from = cascadeForm.find('.from'); 
      pulldown_to = cascadeForm.find('.to'); 

      cascadeSelect(pulldown_from, pulldown_to); 
     });

我添加了檢查是否有孩子只有兩個選擇行選擇：

   if (child.data('options').length == 2) { 
        [select the non-default child option here] 
       }

但我無法弄清楚如何選擇非默認的子選項。我以爲我可以通過使用.selectedIndex做到這一點：

但這似乎引用原始指數值（指數，因爲他們是我已刪除父所選值之前）。

那麼我怎麼能自動選擇兒童選擇中唯一的非默認選項，當父母只有兩個選項開始？

來源

2012-12-17 key2starz

你的jQuery使用大量的類選擇，但也有HTML中沒有任何類。這應該如何工作？ – Barmar

對不起，忘了包括課程 - 更新。 – key2starz

我想我發現了一些問題。

在這一行：

child.append(child.data('options').filter('.' + this.value)) 
      .change();

它看起來像你想使用選擇的類（不是值）進行過濾。所以它過濾基於期權的價值，你應該希望能夠改變你的選擇來解決這個問題：

child.append(child.data('options').filter('[value="' + this.value + '"]')) 
      .change();

最簡單的方法來選擇一個值的下拉列表是隻使用val()。換句話說，你後該行應爲：

child.val(this.value);

我創建了一個JS小提琴，如果你想看到整個事情的工作：http://jsfiddle.net/KkNHr/1/

來源

2012-12-17 07:44:46 Damovisa

這似乎工作......但爲什麼不使用attr？

child.get(0).selectedIndex = 1;

來源

2012-12-17 07:43:26 key2starz

請參閱參考：http://jsfiddle.net/YqGU8/

$(".from").change(function() { 
var val = $(this).find(":selected").val(); 
$(".to option[value='" + val + "']").remove(); 
$(".to option:last").attr('selected','selected'); 
});

來源

2012-12-17 07:43:47 Anujith

jQuery：動態設置選項

回答

相關問題