使用javascript的两个选择框动态选项

时间:2017-12-28 13:09:35

标签: javascript jquery html5 select options

是否可以使用JavaScript动态设置选择框选项。 喜欢根据所选国家选择城市。我有一段JavaScript代码,唯一的问题是我无法获取值而是返回索引值。我希望像“delhi”这样的值不是2或1。

    <script>

            var catAndActs = {};
            catAndActs['Electrician'] = ['Wiring', 'blah blah', 'Data Team', 'Kindergarten Screening', 'Other'];
            catAndActs['Curriculum Development and Alignment'] = ['Capstone Development', 'Course Of Study Development / Revision', 'Standards Alignment / Rollout', 'Other'];
            catAndActs['District Committee'] = ['Curriculum Council', 'Grading & Assessment Task Force', 'Professional Development Planning Committee', 'Race To The Top Committee', 'Teacher Evaluation Committee', 'Other'];
            catAndActs['Plumber'] = ['fitting', 'ELL / eKLIP Teachers', 'Gifted Intervention Specialist', 'Intervention Assistance Team', 'Intervention Teachers', 'Kindergarten Parent Conference', 'delhi', 'Title I Teachers', 'Other'];
            catAndActs['Other Category'] = ['Other'];
            catAndActs['Professional Conference'] = ['Conference'];
            catAndActs['Professional Workshop / Training'] = ['In-District', 'Out-Of-District'];
            catAndActs['Pupil Services'] = ['IEP Meeting', 'IEP Writing'];

            function ChangecatList() {
            var catList = document.getElementById("service");
            var actList = document.getElementById("subservice");
            var selCat = catList.options[catList.selectedIndex].value;
            while (actList.options.length) {
            actList.remove(0);
            }   
            var cats = catAndActs[selCat];
            if (cats) {
                var i;
                for (i = 0; i < cats.length; i++) {
                    var cat = new Option(cats[i], i);
                    actList.options.add(cat);
            }
        }
</script>

<select id="service" name="service" class="form-control" onchange="ChangecatList()" required="">
  <option value="" disabled selected>Select service</option>
  <option value="Electrician">Electrician</option>
  <option value="House Cleaner">House Cleaner</option>
  <option value="Plumber">Plumber</option>
</select>

<select id="subservice" name="subservice" class="form-control" required="">
<option value="" disabled selected>Select sub service</option>
</select>

2 个答案:

答案 0 :(得分:0)

$("[id$=service] option:selected").text();

你可以这样做。

答案 1 :(得分:0)

 ServicePointManager.Expect100Continue = false;
$(document).ready(function(){
		$('#mydropdown').change(function(){
			$selected_value=$('#mydropdown option:selected').text();
			$('#result').text($selected_value);
		});
	});