使用jquery或javascript隱藏選擇框中的重複選項文本值

使用jquery/Js如何隱藏重複文本的選項值。使用jquery或javascript隱藏選擇框中的重複選項文本值

Main Goal is Remove repeated text option value from select box.

我只想隱藏的Test1和Test2的值爲4,5和6號，因爲它們的價值在選項框中重複。

<select name="finish" id="finish"> 
    <option value="">Finish</option> 
    <option id="1" value="1">Test1</option> 
    <option id="2" value="2">Test2</option> 
    <option id="3" value="3">Test3</option> 
    <option id="4" value="4">Test1</option> 
    <option id="5" value="5">Test1</option> 
    <option id="6" value="6">Test2</option> 
</select>

jQuery代碼如下特林，

$(document).ready(function(){ 
    $('#finish').each(function(){ 
     //$(this).text().hide(); 
    }); 
});

最終結果的樣子如下，

<select name="finish" id="finish"> 
    <option value="">Finish</option> 
    <option id="1" value="1">Test1</option> 
    <option id="2" value="2">Test2</option> 
    <option id="3" value="3">Test3</option> 
    <option id="4" value="4" style="display:none">Test1</option> 
    <option id="5" value="5" style="display:none">Test1</option> 
    <option id="6" value="6" style="display:none">Test2</option> 
</select>

如何做到這一點使用JavaScript或jQuery腳本。

謝謝。

來源

2017-05-09 Rakesh Jesadiya

只是一個評論：這不會在IE中工作。所以，如果你的目標是，你應該找到另一個解決方案。 – meskobalazs

好吧，讓IE瀏覽器忽略，但如何做到以上情況在Firefox和鉻。 –

[從選擇下拉菜單中篩選重複選項]的可能重複（http://stackoverflow.com/questions/1875607/filter-duplicate-options-from-select-dropdown） –

Initailaize空數組finishItems。

選擇選項內循環使用

$("select > option").each(function(){ 
});

如果選項不在列表中添加它，如果它存在，刪除它。

var finishItems = {}; 
$("select > option").each(function() { 
if(finishItems[this.text]) { 
    $(this).remove(); 
} else { 
    finishItems[this.text] = this.value; 
}});

$(document).ready(function(){ 
 
var finishItems = {}; 
 
$("select > option").each(function() { 
 
    if(finishItems[this.text]) { 
 
    $(this).remove(); 
 
} else { 
 
    finishItems[this.text] = this.value; 
 
}}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

來源

2017-05-09 09:25:51

感謝您的回答。我會查一下。 –

@RakeshJesadiya如果它適合您，請接受該解決方案。 –

var arr = [] 
 
$("#finish option").each(function(i, v) { 
 
    if ($.inArray($(this).text(), arr) == -1) { 
 
    arr.push($(this).text()) 
 
    } else { 
 

 
    $(this).prop("disabled", true) 
 
    } 
 

 

 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

有一個數組，你可以把每個選項的文本
檢查文本是否爲數組，如果是，那麼禁用

來源

2017-05-09 09:24:18 guradio

與Array#includes()和Array#push功能.Push嘗試innerText到陣列然後檢查新元素的文本是在array.If不存在推與array.else隱藏推崇元件

$(document).ready(function() { 
 
    var arr = []; 
 
    $('#finish option').each(function() { 
 
    var val = $(this).text().trim(); 
 
    if (!arr.includes(val)) { 
 
     arr.push(val) 
 
    } else { 
 
     $(this).hide(); 
 
    } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

來源

2017-05-09 09:27:00 prasanth

您可以使用filter()來過濾與前一個元素具有相同文本的元素以及一個用於存儲文本的對象。

var obj = {}, select = $('select'); 
 

 
select.html(select.find('option').filter(function() { 
 
    var text = $(this).text(); 
 
    return !obj[text] ? obj[text] = 1 : false; 
 
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

如果你只是想添加display: none來複制你可以使用each環代替。

var obj = {},select = $('select'); 
 

 
select.find('option').each(function() { 
 
    var text = $(this).text(); 
 
    !obj[text] ? obj[text] = 1 : $(this).css('display', 'none'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

來源

2017-05-09 09:27:18

我的做法是創建持有的文本，如果選擇的文本已經註冊它刪除選項的對象。

$(document).ready(function(){ 
    var elements = {}; 
    $('#finish option').each(function(){ 
    console.log($(this).val(), this); 
     if(elements[$(this).text()]){ 
     $(this).remove(); 
     } else { 
     elements[$(this).text()] = true; 
     } 
    }); 
});

來源

2017-05-09 09:29:31 kimy82

一個簡單的醛（香草）的Javascript溶液：

var options = document.getElementById('finish').options; 
var contents = []; 
for (var i = 0; i < options.length; i++) { 
    if (contents.includes(options[i].textContent)) { 
     options[i].style.display = 'none'; 
    } else { 
     contents.push(options[i].textContent); 
    } 
}

在IE中，隱藏選項不起作用。在這種情況下，唯一可靠的方法是從DOM中刪除元素，並在需要時讀取它們。

來源

2017-05-09 09:29:50 meskobalazs

嘗試這樣：

var arr = []; 
$('#finish option').each(function(){ 
    if($.inArray($(this).text(), arr) == -1) 
    { 
    arr.push($(this).text()); 
    } 
    else 
    { 
    $(this).hide(); 
    } 
});

Working Fiddle

說明：在IT領域的空白陣列，以及如果它已經存在，檢查它推的獨特價值。並隱藏重複的選項。

來源

2017-05-09 09:29:51

循環選項並刪除重複的值。

var repeatText = {}; 
 
$("#finish > option").each(function() { 
 
    if(repeatText[this.text]) { 
 
    $(this).remove(); 
 
} else { 
 
    repeatText[this.text] = this.value; 
 
}});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

來源

2017-05-09 09:30:58

試試這個：

var seen = {}; 
$('#finish option').each(function() { 
    var txt = $(this).text(); 
    if (seen[txt]) 
     $(this).hide(); 
    else 
     seen[txt] = true; 
});

https://jsfiddle.net/7ru87nfy/

來源

2017-05-09 09:31:44 zerek

要確保只有不同的文字：

var seen = {} 
$(document).ready(function(){ 
    $('#finish').each(function(){ 
     if (seen[ $(this).text() ]) { 
      $(this).hide(); 
     } else { 
      seen[$(this).text()] = true; 
     } 
    }); 
});

seen[ $(this).text() ]部分爲undefined如果未設置，則只有看不到的文本值將轉至else。

您還可以調整更復雜邏輯的條件。

來源

2017-05-09 09:31:46 Larandar

我想這個工程。

$(document).ready(function(){ 
 
    var values231 = []; 
 
    $.each($('option'), function(){ 
 
     var flag = false; 
 
     var thishtml = $(this).html(); 
 
     for(var i = 0; i< values231.length; i++){ 
 
     if(thishtml == values231[i]){ 
 
      $(this).hide(); 
 
      flag = true; 
 
     } 
 
     } 
 
     if(!flag){ 
 
     values231.push(thishtml); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

來源

2017-05-09 09:32:09

只需刪除調試器，它的工作正常。 –

您可以從陣列選項添加數據。在該陣列中查找唯一。

var array = ["Test1", "Test2", "Test3", "Test1", "Test1", "Test2"] 
    var json = _.uniq(array); 
    $.each(json, function(i, value) { 
    $('#finish').append($('<option>').text(value).attr({ 
     'value': i+1, 
     'id': i+1 
    })); 
    });

HTML

<select name="finish" id="finish" class="form-control"> 
    <option value="">Finish</option> 
</select>

演示：https://jsfiddle.net/sumitridhal/kg3pp367/

來源

2017-05-09 09:35:33

你可以存儲在一個新陣列的text列表（見arrHide在我的代碼示例），所以在通過select的選項循環中，您可以檢查當前文本是否已經在arrHide數組中，然後隱藏相關項目。

見下面，請：

var arrHide = []; 
 
$("#finish > option").each(function() { 
 
    if($.inArray(this.text, arrHide) < 0){ 
 
    arrHide.push(this.text); 
 
    } 
 
    else { 
 
    $(this).hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finish" id="finish"> 
 
    <option value="">Finish</option> 
 
    <option id="1" value="1">Test1</option> 
 
    <option id="2" value="2">Test2</option> 
 
    <option id="3" value="3">Test3</option> 
 
    <option id="4" value="4">Test1</option> 
 
    <option id="5" value="5">Test1</option> 
 
    <option id="6" value="6">Test2</option> 
 
</select>

我希望它可以幫助你，再見。

來源

2017-05-09 09:39:28 Alessandro

使用jquery或javascript隱藏選擇框中的重複選項文本值

回答

相關問題