如何从下拉列表中隐藏一些选项

时间：2017-10-02 09:02:25

标签： javascript jquery html html5

我想在下拉列表中仅显示澳大利亚的城市。我怎么能这样做？我试图找到＆＃34;澳大利亚＆＃34;选项并隐藏在它之前和之后。但失败了！

My fiddle 

<select class="dropdown" id="dropdown">
    <option disabled="">Singapore</option>
    <option value="SIN">Singapore</option>
    <option disabled="">Australia</option>
    <option value="ADL">Adelaide</option>
    <option value="AYQ">Ayers Rock / Uluru</option>
    <option value="BNE">Brisbane</option>
    <option value="CNS">Cairns</option>
    <option value="CBR">Canberra</option>
    <option value="OOL">Gold Coast</option>
    <option value="HBA">Hobart</option>
    <option value="LST">Launceston</option>
    <option value="MEL">Melbourne</option>
    <option value="PER">Perth</option>
    <option value="MCY">Sunshine Coast</option>
    <option value="SYD">Sydney</option>
    <option disabled="">Bangladesh</option>
    <option value="DAC">Dhaka</option>
    <option disabled="">Brunei Darussalam</option>
    <option value="BWN">Bandar Seri Begawan</option>
    <option disabled="">China</option>
    <option value="CKG">Chongqing</option>
    <option value="DLC">Dalian</option>
    <option value="CAN">Guangzhou</option>
    <option value="HAK">Haikou</option>
    <option value="HGH">Hangzhou</option>
    <option value="HRB">Harbin</option>
    <option value="TNA">Jinan</option>
    <option value="NKG">Nanjing</option>
    <option value="NNG">Nanning</option>
    <option value="NGB">Ningbo</option>
    <option value="TAO">Qingdao</option>
    <option value="JJN">Quanzhou</option>
    <option value="SHE">Shenyang</option>
    <option value="SZX">Shenzhen</option>
    <option value="TSN">Tianjin</option>
    <option value="WUX">Wuxi/Suzhou</option>
    <option value="XIY">Xi'an</option>
    <option value="CGO">Zhengzhou</option>
</select>

7 个答案:

答案 0 :(得分：0)

如果你知道你想要保留的选项的价值，你可以循环选项并隐藏它们，如果他们没有这个值：

var select = $("#dropdown");

for (var i = 0; i < select .length; i++){
   if (select.options[i].value != 'YOURVALUE' )
       select.css("display":"none");
}

将 YOURVALUE 替换为您要保留的选项的值，即澳大利亚城市的值。

答案 1 :(得分：0)

要隐藏下拉列表中的值，请使用

<option value="TNA" style="display:none;">Jinan</option>

答案 2 :(得分：0)

<强> Working fiddle

由于您使用的是jQuery，因此可以使用nextUntil()从Australia中选择所有选项，直到下一个国家/地区为止：

//Hide all
$('#dropdown option').hide(); 

//Get the target
var australia = $('#dropdown').find('option:contains("Australia")');

//Select the targeted country & Show all the cities until the next country
australia.attr('selected','selected').show().nextUntil("option[disabled]" ).show();

希望这有帮助。

＆＃13;
＆＃13; 
$('#dropdown option').hide(); 
var australia = $('#dropdown').find('option:contains("Australia")');
australia.attr('selected','selected').show().nextUntil( "option[disabled]" ).show();
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="dropdown" id="dropdown">
    <option disabled="">Singapore</option>
    <option value="SIN">Singapore</option>
    <option disabled="">Australia</option>
    <option value="ADL">Adelaide</option>
    <option value="AYQ">Ayers Rock / Uluru</option>
    <option value="BNE">Brisbane</option>
    <option value="CNS">Cairns</option>
    <option value="CBR">Canberra</option>
    <option value="OOL">Gold Coast</option>
    <option value="HBA">Hobart</option>
    <option value="LST">Launceston</option>
    <option value="MEL">Melbourne</option>
    <option value="PER">Perth</option>
    <option value="MCY">Sunshine Coast</option>
    <option value="SYD">Sydney</option>
    <option disabled="">Bangladesh</option>
    <option value="DAC">Dhaka</option>
    <option disabled="">Brunei Darussalam</option>
    <option value="BWN">Bandar Seri Begawan</option>
    <option disabled="">China</option>
    <option value="CKG">Chongqing</option>
    <option value="DLC">Dalian</option>
    <option value="CAN">Guangzhou</option>
    <option value="HAK">Haikou</option>
    <option value="HGH">Hangzhou</option>
    <option value="HRB">Harbin</option>
    <option value="TNA">Jinan</option>
    <option value="NKG">Nanjing</option>
    <option value="NNG">Nanning</option>
    <option value="NGB">Ningbo</option>
    <option value="TAO">Qingdao</option>
    <option value="JJN">Quanzhou</option>
    <option value="SHE">Shenyang</option>
    <option value="SZX">Shenzhen</option>
    <option value="TSN">Tianjin</option>
    <option value="WUX">Wuxi/Suzhou</option>
    <option value="XIY">Xi'an</option>
    <option value="CGO">Zhengzhou</option>
</select>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

  

仅显示澳大利亚的城市

假设您的列表包含国家/地区（已禁用选项），其后是直接，其后是另一个禁用选项：

使用this answer查找澳大利亚option：

var aus = $('option').filter(function () { return $(this).html() == "Australia"; });

然后使用.nextAll查找下一个已停用的option，并在其之前使用option和prev()获取.index()。

然后隐藏与该索引范围不匹配的条目

最后，选择第一个option

进行整理 
aus.attr('selected', true);

＆＃13;
＆＃13; 
var aus = $('option').filter(function () { return $(this).html() == "Australia"; });
var ifrom = aus.index();
var ito = aus.nextAll("[disabled]").first().prev().index();

$("option").filter(function() { 
    return $(this).index() < ifrom || $(this).index() > ito 
}).hide();

aus.attr('selected', true);
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="popup_origin_select" class="origin-select-shared" id="popup_origin_select_return">
    <option disabled="">Singapore</option>
    <option value="SIN">Singapore</option>
    <option disabled="">Australia</option>
    <option value="ADL">Adelaide</option>
    <option value="AYQ">Ayers Rock / Uluru</option>
    <option value="BNE">Brisbane</option>
    <option value="CNS">Cairns</option>
    <option value="CBR">Canberra</option>
    <option value="OOL">Gold Coast</option>
    <option value="HBA">Hobart</option>
    <option value="LST">Launceston</option>
    <option value="MEL">Melbourne</option>
    <option value="PER">Perth</option>
    <option value="MCY">Sunshine Coast</option>
    <option value="SYD">Sydney</option>
    <option disabled="">Bangladesh</option>
    <option value="DAC">Dhaka</option>
    <option disabled="">Brunei Darussalam</option>
    <option value="BWN">Bandar Seri Begawan</option>
    <option disabled="">China</option>
    <option value="CKG">Chongqing</option>
    <option value="DLC">Dalian</option>
    <option value="CAN">Guangzhou</option>
    <option value="HAK">Haikou</option>
    <option value="HGH">Hangzhou</option>
    <option value="HRB">Harbin</option>
    <option value="TNA">Jinan</option>
    <option value="NKG">Nanjing</option>
    <option value="NNG">Nanning</option>
    <option value="NGB">Ningbo</option>
    <option value="TAO">Qingdao</option>
    <option value="JJN">Quanzhou</option>
    <option value="SHE">Shenyang</option>
    <option value="SZX">Shenzhen</option>
    <option value="TSN">Tianjin</option>
    <option value="WUX">Wuxi/Suzhou</option>
    <option value="XIY">Xi'an</option>
    <option value="CGO">Zhengzhou</option>
</select>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

$(document).ready(function(){
    var australiaCities=[] // Array of Australia cities 
    $("#dropdown option").each(function(){
        if(australiaCities.indexOf($(this).val())==-1){
            $(this).hide();
        }// check if this option value is not in autraliaCities so hide this option 
    )};
)};

答案 5 :(得分：0)

我个人将所有城市都放在一个按国家/地区键入的对象中 - 您会发现操纵对象比将所有数据存储为HTML元素要容易得多。例如，在这里你只需将国家名称传递给一个函数，然后将数据从存储的对象中提取出来并插入到：

var countries = {};
var curr;

function showCities(selectedCountry) {
    var h = '<option disabled>' + selectedCountry + '</option>';
  $.each(countries[selectedCountry], function(i, c) {
    h += '<option value="' + c.value + '">' + c.name + '</option>';
  });
  $('#popup_origin_select_return').html(h);
}

$(document).ready(function() {
    $('#popup_origin_select_return option').each(function(i) {
    if($(this)[0].hasAttribute("disabled")) {
        countries[$(this).text()] = [];
      curr = $(this).text();
    } else {
        countries[curr].push({
        value: $(this).val(),
        name: $(this).text()
      });
    }
  });
    showCities('China');
});

https://jsfiddle.net/uo31jjjn/5/

答案 6 :(得分：0)

您可以使用HTML5的自定义数据 - *属性。那就是你添加到所有选项
data-country="some country"并使用例如jQuery迭代：

var isolated = "australia";
$("option").each(function(){
    var opt = $(this);
    if(opt.attr("data-country")!==isolated){
        opt.hide();
    }
});

（我希望语法有点好）

data-* attribute documentation

编辑：
我想到的另一个解决方案是使用optgroup 您的选择将如下所示：

<select class="dropdown" id="dropdown">
    <optgroup label="Australia">
        <option value="ADL">Adelaide</option>
        <option value="AYQ">Ayers Rock / Uluru</option>
        <option value="BNE">Brisbane</option>
        <option value="CNS">Cairns</option>
        <option value="CBR">Canberra</option>
        <option value="OOL">Gold Coast</option>
        <option value="HBA">Hobart</option>
        <option value="LST">Launceston</option>
        <option value="MEL">Melbourne</option>
        <option value="PER">Perth</option>
        <option value="MCY">Sunshine Coast</option>
        <option value="SYD">Sydney</option>
    </optgroup>
    .
    .
    .
</select>

但这并没有什么区别，你不能在hidden上使用disabled，只有 private void showGotoPageDialog() { final Dialog mDialog = new Dialog(getActivity()); mDialog.setContentView(R.layout.grid_dialogue); mDialog.getWindow().setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT); GridView mGridView = (GridView) mDialog.findViewById(R.id.grid_dialog); ArrayList<String> tmp = new ArrayList<>(mPageOptions.length); for(int i = 0; i < mPageOptions.length; i++) { tmp.add(mPageOptions[i].split(" ")[1]); } CustomAdapter adapter = new CustomAdapter(getActivity(), tmp, mPageIndx); //ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, tmp); mGridView.setAdapter(adapter); mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> adapterView, View view, int item, long l) { mDialog.dismiss(); mPageIndx = item + 1; updateQuotesListServer(); updatePageInfo(); } }); mDialog.show(); TextView dismiss = (TextView) mDialog.findViewById(R.id.dialog_dismiss); dismiss.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mDialog.dismiss(); } }); } 。

相关问题
最新问题