jquery選擇鏈接到標題，而不是價值

Question

嗨，大家抱歉，再次問這一個，但我有一些jquery，改變了第二選擇的價值當前即時通訊使用下面的代碼，因爲我試着使用各種版本的.hide .show做的工作，但我客串，因爲即時通訊已經在使用它會導致一些干擾的變化，但是這是一個使用

jQuery.fn.filterOn = function(selectFrom, values) { 
    return this.each(function() { 
     var select = this; 
     var options = []; 
     $(select).find('option').each(function() { 
      $(this).attr("title"); 
     }); 
     $(select).data('options', options); 
     console.log(selectFrom); 
     $(selectFrom).change(function() { 
      var options = $(select).empty().data('options'); 
      var haystack = values[$(this).val()]; 
      console.log(haystack); 
      $.each(options, function(i) { 
       var option = options[i]; 
       if($.inArray(option.value, haystack) !== -1) { 
        $(select).append(
        $('<option>').text(option.text).val(option.value) 
        ); 
       } 
      }); 
     });    
    }); 
}; 

$(function() { 
    $('#city').filterOn('#country', { 
     'default': [], 
     'LK':['LK'],'SY':['SY'],'KE':['KE'] 

     }); 
}); 

那麼這是兩個選擇的樣子記住第一個擁有155個值碼IM第二個擁有超過16000個值;

<select id="country" name="country"> 
<option value="">---------</option> 
<option value="LK">Sri Lanka</option> 
<option value="SY">Syria</option> 
<option value="KE">Kenya</option>....... 
</select> 

<select id="city" name="city"> 
<option value="">---------</option> 
<option title="LK" value="1252211">Ahangama</option> 
<option title="LK" value="1252196">Ahungalla</option> 
<option title="LK" value="8100176">Ahungalle</option> 
<option title="LK" value="1251081">Anuradhapura</option> 
<option title="LK" value="1250308">Bandarawela</option> 
<option title="LK" value="1249978">Bentota</option> 
<option title="LK" value="8100177">Beruwela</option> 
<option title="LK" value="1248991">Colombo</option> 
<option title="LK" value="1248750">Dambulla</option> 
<option title="LK" value="8202608">Dickwella</option> 
<option title="LK" value="8208032">Embilipitiya</option> 
<option title="LK" value="1224688">Wadduwa</option> 
<option title="LK" value="1223738">Weligama</option> 
<option title="SY" value="170063">Aleppo</option> 
<option title="SY" value="8100417">Bloudan</option>...... 
</select> 

這一切的作品，但由於其使用推即時通訊假設它重新排列第二選擇有標題值作爲值，因此它會說的LK，而不是它需要的數字。 ive嘗試了一些嘗試不同的.hide .show，但似乎沒有任何工作也這兩個選擇是在一個使用jquery hide show的跨度內。不知道這是否會影響對孩子元素的隱藏顯示，但我不能讓它工作應該如何。我也看了一些關於級聯選擇的其他討論，但無法找到解決我的問題的方法。

Answer 1

首先，我會建議使用ajax或類似的東西來獲取基於所選值的數據。但是，如果你想知道什麼地方錯了你提供的代碼，有幾件事情：

var options = []; 
    $(select).find('option').each(function() { 
     $(this).attr("title"); 
    }); 
    $(select).data('options', options); 

這裏你定義一個空數組，然後遍歷所有的選項，什麼都不做任何（$(this).attr("title");返回標題屬性的值，但你不用做任何事情）。然後，將select的options數據元素設置爲空數組。我想你想要做的是更多的東西一樣：

var options = []; 
    $(select).find('option').each(function() { 
     options.push(this); 
    }); 
    $(select).data('options', options); 

這將存儲在數據緩存中的所有16000個option元素。我想一個更好的選擇可能是：現在

var options = {}; 
    $(select).find('option').each(function() { 
     var $o = $(this), title = $o.attr('title'); 
     if (options.hasOwnProperty(title) === false) { 
      options[title] = []; 
     } 
     options[title].push({ 'text': $o.text(), 'value': $o.val() }); 
    }); 
    $(select).data('options', options); 

，在你改變功能，你可以這樣做：

$(selectFrom).change(function() { 
     var $select = $(select), 
      options = $select.empty().data('options')[$(this).val()]; 
     // options is now just an array of objects with value and text properties, so: 
     $.each(options, function() { 
      $('<option value="' + this.value + '">' + this.text + '</option>').appendTo($select); 
     }); 
    });    

你不是在內存中存儲整個DOM元素的方式，而是隻相關的信息。希望有所幫助。