Js下拉框选择

                      html中定义 <select data-bind="options: $root.EndTimeList, value: $root.EndTimeInfo, optionsValue: 'VALUE', optionsText: 'NAME'">
                                     </select>
                                        <select data-bind="options: $root.EndSecondList, value: $root.EndSecondInfo, optionsValue: 'VALUE', optionsText: 'NAME'">

                                     </select>


self.EndTimeList =ko. ko.observableArray();

self.EndTime = ko.observable();

       self.EndTimeList = ko.observableArray([{ NAME: '1', VALUE: '1:' }, { NAME: '2', VALUE: '2:' }, { NAME: '3', VALUE: '3:' }, { NAME: '4', VALUE: '4:' }
           , { NAME: '5', VALUE: '5:' }, { NAME: '6', VALUE: '6:' }, { NAME: '7', VALUE: '7:' }, { NAME: '8', VALUE: '8:' }
           , { NAME: '9', VALUE: '9:' }, { NAME: '10', VALUE: '10:' }, { NAME: '11', VALUE: '11:' }, { NAME: '12', VALUE: '12:' }
           , { NAME: '13', VALUE: '13:' }, { NAME: '14', VALUE: '14:' }, { NAME: '15', VALUE: '15:' }, { NAME: '16', VALUE: '16:' }
           , { NAME: '17', VALUE: '17:' }, { NAME: '18', VALUE: '18:' }, { NAME: '19', VALUE: '19:' }, { NAME: '20', VALUE: '20:' }
           , { NAME: '21', VALUE: '21:' }, { NAME: '22', VALUE: '22:' }, { NAME: '23', VALUE: '23:' }, { NAME: '24', VALUE: '24:' }]);
        //分
        self.EndSecondList = ko.observableArray([{ NAME: '00', VALUE: '00' }, { NAME: '01', VALUE: '01' }, { NAME: '02', VALUE: '02' }, { NAME: '03', VALUE: '03' }, { NAME: '04', VALUE: '04' }
            , { NAME: '05', VALUE: '05' }, { NAME: '06', VALUE: '06' }, { NAME: '07', VALUE: '07' }, { NAME: '08', VALUE: '08' }
            , { NAME: '09', VALUE: '09' }, { NAME: '10', VALUE: '10' }, { NAME: '11', VALUE: '11' }, { NAME: '12', VALUE: '12' }
            , { NAME: '13', VALUE: '13' }, { NAME: '14', VALUE: '14' }, { NAME: '15', VALUE: '15' }, { NAME: '16', VALUE: '16' }
            , { NAME: '17', VALUE: '17' }, { NAME: '18', VALUE: '18' }, { NAME: '19', VALUE: '19' }, { NAME: '20', VALUE: '20' }
            , { NAME: '21', VALUE: '21' }, { NAME: '22', VALUE: '22' }, { NAME: '23', VALUE: '23' }, { NAME: '24', VALUE: '24' }
            , { NAME: '25', VALUE: '25' }, { NAME: '26', VALUE: '26' }, { NAME: '27', VALUE: '27' }, { NAME: '28', VALUE: '28' }
            , { NAME: '29', VALUE: '29' }, { NAME: '30', VALUE: '30' }, { NAME: '31', VALUE: '31' }, { NAME: '32', VALUE: '32' }
            , { NAME: '33', VALUE: '34' }, { NAME: '35', VALUE: '36' }, { NAME: '37', VALUE: '38' }, { NAME: '39', VALUE: '39' }
            , { NAME: '40', VALUE: '40' }, { NAME: '40', VALUE: '40' }, { NAME: '41', VALUE: '42' }, { NAME: '43', VALUE: '43' }
            , { NAME: '44', VALUE: '44' }, { NAME: '45', VALUE: '45' }, { NAME: '46', VALUE: '46' }, { NAME: '47', VALUE: '47' }
            , { NAME: '48', VALUE: '48' }, { NAME: '49', VALUE: '49' }, { NAME: '50', VALUE: '50' }, { NAME: '51', VALUE: '51' }
            , { NAME: '52', VALUE: '52' }, { NAME: '53', VALUE: '53' }, { NAME: '54', VALUE: '54' }, { NAME: '55', VALUE: '55' }
            , { NAME: '56', VALUE: '56' }, { NAME: '57', VALUE: '57' }, { NAME: '58', VALUE: '58' }, { NAME: '59', VALUE: '59' }
            , { NAME: '60', VALUE: '60' }


        ]);



后台js直接使用对象可以获取到下拉框选择的数据

A:在前端开发中,通常使用下拉框(select)来选择筛选数据,而且有时候需要实现多级下拉框联动的功能,比如选择省份后再选择城市,选择城市后再选择区县等。 实现多级下拉框联动需要涉及到以下几个步骤: 1. 根据第一个下拉框的值筛选对应的数据。 2. 将筛选出来的数据作为第二个下拉框的选项。 3. 监听第一个下拉框的变化,当其值改变时重新筛选数据并更新第二个下拉框的选项。 4. 重复以上步骤,实现多级下拉框联动功能。 下面是一个简单的实现示例: HTML代码: ``` <select id="province"> <option value="">请选择省份</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广东">广东</option> </select> <select id="city"> <option value="">请选择城市</option> </select> ``` JS代码: ``` var cityData = { '北京': ['东城区', '西城区', '朝阳区'], '上海': ['黄浦区', '徐汇区', '长宁区'], '广东': ['广州市', '深圳市', '珠海市'] }; var provinceSelect = document.getElementById('province'); var citySelect = document.getElementById('city'); provinceSelect.addEventListener('change', function() { var province = provinceSelect.value; var cities = cityData[province]; // 清空第二个下拉框的选项并添加新的选项 citySelect.innerHTML = '<option value="">请选择城市</option>'; cities.forEach(function(city) { var option = document.createElement('option'); option.value = city; option.textContent = city; citySelect.appendChild(option); }); }); ``` 在上面的示例中,我们定义了一个cityData对象,这里只是做了简单的演示,实际应用中需要根据实际情况进行修改。我们监听第一个下拉框的变化事件,当值改变时根据对应的省份筛选出城市数据,并将它们添加到第二个下拉框中。 这样就完成了一个简单的多级下拉框联动功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值