select 级联

每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了。

比如<select class="selector"></select>

1、设置value为pxx的项选中

     $(".selector").val("pxx");

2、设置text为pxx的项选中

    $(".selector").find("option[text='pxx']").attr("selected",true);

    这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。

3、获取当前选中项的value

    $(".selector").val();

4、获取当前选中项的text

    $(".selector").find("option:selected").text();

    这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。

 

很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

如:$(".selector1").change(function(){

     // 先清空第二个

      $(".selector2").empty();

     // 实际的应用中,这里的option一般都是用循环生成多个了

      var option = $("<option>").val(1).text("pxx");

      $(".selector2").append(option);

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个antd select级联选择器的示例代码: ``` import React, { useState } from 'react'; import { Select } from 'antd'; const { Option } = Select; const CascaderSelect = () => { const [cities, setCities] = useState([]); const [regions, setRegions] = useState([]); const handleCountryChange = (value) => { setCities([]); setRegions([]); // 根据选中的国家,设置城市选项 if (value === 'china') { setCities(['beijing', 'shanghai', 'guangzhou']); } else if (value === 'usa') { setCities(['new york', 'washington', 'los angeles']); } else if (value === 'japan') { setCities(['tokyo', 'osaka', 'kyoto']); } } const handleCityChange = (value) => { setRegions([]); // 根据选中的城市,设置地区选项 if (value === 'beijing') { setRegions(['haidian', 'chaoyang', 'dongcheng']); } else if (value === 'shanghai') { setRegions(['pudong', 'minhang', 'xuhui']); } else if (value === 'guangzhou') { setRegions(['yuexiu', 'tianhe', 'haizhu']); } else if (value === 'new york') { setRegions(['manhattan', 'brooklyn', 'queens']); } else if (value === 'washington') { setRegions(['northwest', 'northeast', 'southeast']); } else if (value === 'los angeles') { setRegions(['hollywood', 'beverly hills', 'santa monica']); } else if (value === 'tokyo') { setRegions(['shibuya', 'shinjuku', 'harajuku']); } else if (value === 'osaka') { setRegions(['umeda', 'namba', 'tennoji']); } else if (value === 'kyoto') { setRegions(['higashiyama', 'nakagyo', 'shimogyo']); } } return ( <div> <Select style={{ width: 200 }} onChange={handleCountryChange}> <Option value="china">China</Option> <Option value="usa">USA</Option> <Option value="japan">Japan</Option> </Select> <Select style={{ width: 200, marginLeft: 10 }} onChange={handleCityChange}> {cities.map(city => ( <Option key={city} value={city}>{city}</Option> ))} </Select> <Select style={{ width: 200, marginLeft: 10 }}> {regions.map(region => ( <Option key={region} value={region}>{region}</Option> ))} </Select> </div> ); } export default CascaderSelect; ``` 这个示例代码中,我们使用了React的useState Hook来管理组件的状态,根据选中的国家和城市设置城市和地区选项。在Select组件中,我们使用了antd的Option组件来设置选项,onChange事件用来处理选项的变化,根据选中的值来动态更新组件的状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值