자바 스크립트를 사용하는 두 개의 선택 상자 동적 옵션

Question

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>