城市多选

Multiple select for cities

本文关键字：城市      更新时间：2023-09-26

我有一个下拉列表，它由组列表和组的各个项目组成。我想选择一个组，这样组项目也应该根据下拉菜单中的组选择自动选择。如果选择了组项目，那么整个组都应该取消选择

这是我的html代码：

  <option class="options" value="allinone" id="puneid" >Pune</option>
       <option class="options" value="1">pune-loc</option>
    <option class="options" value="2">pune-loc1</option>
    <option class="options" value="3">pune-loc2</option>
    <option class="options" value="16">pune-loc3</option>
    <option class="mumbai" value="allinone" id="mumbaiid" >Mumbai</option>
    <option class="mumbai" value="1">mum-loc</option>
    <option class="mumbai" value="2">mum-loc1</option>
    <option class="mumbai" value="3">mum-loc2</option>
    <option class="mumbai" value="16">mum-loc3</option>
    <option class="mumbai" value="26">mum-loc5</option>
</select>

我的js代码是：

$('#siteSelector').click(function(){
    var self = $(this);
    if(self.val() == 'all'){
       self.children().prop('selected',true).click()
    }
    else
    {
        self.find('.options:first').prop('selected', false)
    }
})
$('#mumbaiid').click(function(){
     var self = $(this);
    if(self.val() == 'allinone'){
       self.children().prop('selected',true).click()
    }
    else
    {
        self.find('.mumbai:first').prop('selected', false)
    }
    })

我想要一个输出，比如当我点击浦那时，浦那下的位置应该选择，当我点击孟买时，孟买下的位置必须选择。

当我们选择这两个城市时，孟买和浦那两个城市应该选择。当我们点击子区域时，只有子区域应该选择

试试这个：

$('#mumbaiid').click(function(){
     var self = $(this);
    if(self.val() == 'allinone'){
       $("."+self.attr('class')).prop('selected',true);
       // or you can also use 
       // self.siblings("."+self.attr('class')).prop('selected',true);
    }
    else
    {
        self.find('.mumbai:first').prop('selected', false)
    }
    })

这是工作演示。http://jsfiddle.net/ax0bhyy6/

你可以得到这样的选择值：

$("select option:selected").each(function (){
   alert($(this).val());
});

**使用这个*

<select multiple>
<option class="options" value="allinone" id="puneid" >Pune</option>
<option class="options" value="1">pune-loc</option>
<option class="options" value="2">pune-loc1</option>
<option class="options" value="3">pune-loc2</option>
<option class="options" value="16">pune-loc3</option>
<option class="mumbai" value="allinone" id="mumbaiid" >Mumbai</option>
<option class="mumbai" value="1">mum-loc</option>
<option class="mumbai" value="2">mum-loc1</option>
<option class="mumbai" value="3">mum-loc2</option>
<option class="mumbai" value="16">mum-loc3</option>
<option class="mumbai" value="26">mum-loc5</option>

相关文章：