JavaScriptを使用した2つの選択ボックス動的オプション

Question

JavaScriptを使用して選択ボックスオプションを動的に設定することは可能ですか？ 選択した国に応じて都市を選択するのが好きです。 JavaScriptのスニペットがありますが、唯一の問題はインデックス値を返す代わりに値を取得できないことです。私は、あなたがこのように行うことができ、「デリー」ではない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> 

Answer 1

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

のような値が欲しいです。

Answer 2

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

<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>