刪除從另一個下拉菜單中選擇的下拉列表

我在網上搜索了一段時間，但仍無法找到答案，我的網站上有三個下拉菜單。刪除從另一個下拉菜單中選擇的下拉列表

我使用它們來接受用戶偏好，以便用戶可以控制結果的輸出。

所以我想知道如果它的值可以從其他2個下拉列表中選出來，

例如，如果用戶選擇第一個中的電影，它將不會在其他電影中。

這裏是我的下拉菜單

<select id="pref1select"> 
<option value="P">Preference One</option> 
    <option value="M">Movie</option> 
    <option value="T">Tv</option> 
    <option value="G">Games</option> 
</select> 
<select id="pref2select"> 
<option value="P">Preference Two</option> 
    <option value="M">Movie</option> 
    <option value="T">Tv</option> 
    <option value="G">Games</option> 
</select> 
<select id="pref3select"> 
<option value="P">Preference Three</option> 
    <option value="M">Movie</option> 
    <option value="T">Tv</option> 
    <option value="G">Games</option> 
</select>

來源

2014-04-27 Jamiex304

這將禁用它，但無法將其刪除。
小提琴：http://jsfiddle.net/p2SFA/1/

HTML：（由.preferenceSelect類）

<select id="pref1select" class="preferenceSelect"> 
    <option value="P">Preference One</option> 
    <option value="M">Movie</option> 
    <option value="T">Tv</option> 
    <option value="G">Games</option> 
</select> 
<select id="pref2select" class="preferenceSelect"> 
    <option value="P">Preference Two</option> 
    <option value="M">Movie</option> 
    <option value="T">Tv</option> 
    <option value="G">Games</option> 
</select> 
<select id="pref3select" class="preferenceSelect"> 
    <option value="P">Preference Three</option> 
    <option value="M">Movie</option> 
    <option value="T">Tv</option> 
    <option value="G">Games</option> 
</select>

的jQuery：

$(document).ready(function() { 
    $(".preferenceSelect").change(function() { 
     // Get the selected value 
     var selected = $("option:selected", $(this)).val(); 
     // Get the ID of this element 
     var thisID = $(this).prop("id"); 
     // Reset so all values are showing: 
     $(".preferenceSelect option").each(function() { 
      $(this).prop("disabled", false); 
     }); 
     $(".preferenceSelect").each(function() { 
      if ($(this).prop("id") != thisID) { 
       $("option[value='" + selected + "']", $(this)).prop("disabled", true); 
      } 
     }); 

    }); 
});

如果你想刪除它，你可能會做jQuery知道什麼插入時，它已經關注計算負擔，因爲一個新的選擇是由:)

來源

2014-04-27 01:41:54

你不應該在這種情況下使用'attr'：http://stackoverflow.com/questions/5874652/prop-vs-attr – Chase

哦！我在這裏學習了很多新東西。 –

我們都= =）只是想我會指出來，所以你知道，看起來像你照顧它。 – Chase

我相信這樣的事情會做給上面的HTML的伎倆：

var $selects = $("select"); 

$selects.on("change", function(){ 
    var value = this.value; 

    $("option[value='" + value +"']", $selects).prop("disabled", true);  
});

這顯然禁止複製選項，但它是一個簡單的變化也刪除它們。儘管你會遇到一個小問題，因爲「首選項＃」選項都具有相同的值。我會建議製作這些optgroup標籤或完全刪除這些值並將它們從一開始標記爲禁用，因爲您應該無法首先單擊它們。你可以找到更多的選項標籤和分隔符回答here。

Example

來源

2014-04-27 01:36:23 Chase

你應該試試這個：

$(".preferenceSelect").on("change", function() { 
      $(".preferenceSelect option").prop("disabled", false); 
      var selectPref = $("option:selected", $(this)).val(); 
      var selectId = $(this).prop("id"); 
      $(".preferenceSelect option").each(function() { 
       $(this).show(); 
      }); 
      $(".preferenceSelect").each(function() { 
       if ($(this).prop("id") != selectId) { 
        $("option[value='" + selectPref + "']", $(this)).prop("disabled", true); 
       } 
      }); 

     });

這必須是你的工作。

來源

2014-04-27 06:50:04

did not work sorry – Jamiex304

這應該爲你工作：

$(document).ready(function() { 
    $(".preferenceSelect").change(function() { 
     // Get the selected value 
     var selected = $("option:selected", $(this)).val(); 
     // Get the ID of this element 
     var thisID = $(this).attr("id"); 
     // Reset so all values are showing: 
     $(".preferenceSelect option").each(function() { 
      $(this).show(); 
     }); 
     $(".preferenceSelect").each(function() { 
      if ($(this).attr("id") != thisID) { 
       $("option[value='" + selected + "']", $(this)).hide(); 
      } 
     }); 
    }); 
});`

來源

2015-06-26 13:09:37 Adit

刪除從另一個下拉菜單中選擇的下拉列表

回答

相關問題