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

【问题标题】：Two select box dynamic options using javascript使用 javascript 的两个选择框动态选项
【发布时间】：2018-06-09 00:56:19
【问题描述】：

是否可以使用 JavaScript 动态设置选择框选项。就像根据所选国家选择城市一样。我有一个 JavaScript 的 sn-p，唯一的问题是我无法获取值，而是返回索引值。我想要像“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>

【问题讨论】：

能否提供您的html
请提供minimal reproducible example

标签： javascript jquery html select options

【解决方案1】：

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

你可以这样做。

【讨论】：

【解决方案2】：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mydropdown">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
<div id="result"></div>

【讨论】：