선택한 선택 옵션에 따라 다른 선택 표시

Andresgl

안녕하세요,

두 가지 옵션이 있습니다.

<select name="calc_shipping_country" id="calc_shipping_country" class="country_to_state" rel="calc_shipping_state">
    <option value="">Select a country…</option>
    <option value="IE">Republic of Ireland</option>
    <option value="GB" selected="selected">United Kingdom (UK)</option> 
</select>

첫 번째 선택의 값이 UK와 같은 경우 다른 옵션으로 다음 코드 (다른 선택)를 표시하고 싶습니다.

$('#calc_shipping_state_field').after("<p class='form-row form-row-wide' id='calc_shipping_state_field' id=''> <select name='' id='county_selected' class='' rel=''> <option value=''>Select a county…</option>  <option value='BE'>Bedfordshire</option> <option value='BER'>Berkshire</option> <option value='BRI'>Bristol</option> <option value='BUCK'>Buckinghamshire</option> <option value='CA'>Cambridgeshire</option> <option value='CHES'>Cheshire</option> <option value='LN'>City of London</option> </select></p>");
  $( "#county_selected" ).change(function() {
    $('#calc_shipping_state_field input.input-text').val($(this).find('option:selected').text());
  });

값이 IE와 같으면이 선택을 표시합니다.

 $('#calc_shipping_state_field').after("<p class='form-row form-row-wide' id='calc_shipping_state_field' id=''> <select name='' id='county_selected' class='' rel=''> <option value=''>Select a county…</option>  <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> <option value='6'>6</option> <option value='7'>7</option> </select></p>");
  //     $('#calc_shipping_state_field input.input-text').val($(this).find('option:selected').text());
  //     });

첫 번째 선택에는 두 가지 옵션 만 있습니다. 다음 IF를 사용할 수 있다고 생각했습니다.

  $('#calc_shipping_country').change(function(){
    if($(this).val() == 'UK'){
      $('#calc_shipping_state_field').after("<p class='form-row form-row-wide' id='calc_shipping_state_field' id=''> <select name='' id='county_selected' class='' rel=''> <option value=''>Select a county…</option>  <option value='BE'>Bedfordshire</option> <option value='BER'>Berkshire</option> <option value='BRI'>Bristol</option> <option value='BUCK'>Buckinghamshire</option> <option value='CA'>Cambridgeshire</option> <option value='CHES'>Cheshire</option> <option value='LN'>City of London</option> </select></p>");
      $( "#county_selected" ).change(function() {
        $('#calc_shipping_state_field input.input-text').val($(this).find('option:selected').text());
      });
    }
    else {
      $('#calc_shipping_state_field').after("<p class='form-row form-row-wide' id='calc_shipping_state_field' id=''> <select name='' id='county_selected' class='' rel=''> <option value=''>Select a county…</option>  <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> <option value='6'>6</option> <option value='7'>7</option> </select></p>");
      $('#calc_shipping_state_field input.input-text').val($(this).find('option:selected').text());
      });
    }
  });

하지만 작동하지 않습니다 ...

참조 : https://api.jquery.com/change/

누군가 나를 도와주고 내가 저지른 실수가 어디인지 말해 줄 수 있습니까?

감사합니다!

kbysiec

첫째, 옵션에는 가치가 'GB'있지만 if 문에서는 if($(this).val() == 'UK').

또한 select다음을 사용하여 추가 된 동적 태그 를 지우는 것이 좋습니다 .

$(this).next().remove();

마지막으로 괄호에 문제가 있다는 것입니다. 올바른 해결책 :

 $('#calc_shipping_country').change(function(){
    $(this).next().remove();
if($(this).val() == 'GB'){
  $('#calc_shipping_country').after("<p class='form-row form-row-wide' id='calc_shipping_state_field' id=''> <select name='' id='county_selected' class='' rel=''> <option value=''>Select a county…</option>  <option value='BE'>Bedfordshire</option> <option value='BER'>Berkshire</option> <option value='BRI'>Bristol</option> <option value='BUCK'>Buckinghamshire</option> <option value='CA'>Cambridgeshire</option> <option value='CHES'>Cheshire</option> <option value='LN'>City of London</option> </select></p>");
  $( "#county_selected" ).change(function() {
    $('#calc_shipping_state_field input.input-text').val($(this).find('option:selected').text());
  });
}
else if($(this).val() == 'IE'){
  $('#calc_shipping_country').after("<p class='form-row form-row-wide' id='calc_shipping_state_field' id=''> <select name='' id='county_selected' class='' rel=''> <option value=''>Select a county…</option>  <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> <option value='6'>6</option> <option value='7'>7</option> </select></p>");
  $('#calc_shipping_state_field input.input-text').val($(this).find('option:selected').text());
  }
});

jsfiddle에서 데모를 확인하십시오.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

선택한 다른 옵션에 따라 선택 옵션 변경

분류에서Dev

keystonejs는 다른 선택 옵션 선택에 따라 선택 옵션을 표시합니다.

분류에서Dev

다른 선택에 따라 선택 목록 표시

분류에서Dev

선택에서 다른 선택의 제목까지 선택한 옵션 표시

분류에서Dev

다른 선택에 따라 옵션을 선택하는 방법

분류에서Dev

선택한 옵션에 따라 조건부로 재질 UI 선택 (드롭 다운) 표시

분류에서Dev

선택한 다른 옵션 상자에 따라 선택 상자 값 변경

분류에서Dev

다른 선택 옵션에 따라 표시되는 선택을 변경하고 동일한 옵션 값을 유지합니다.

분류에서Dev

내가 선택한 옵션에 따라 팝업 기준 표시

분류에서Dev

다른 선택에 따라 '재 선택'선택 (jQuery)

분류에서Dev

Angular JS-드롭 다운의 부울 값에 따라 표시 선택 옵션

분류에서Dev

다중 선택 옵션에서 이전에 선택한 값 표시

분류에서Dev

선택한 옵션에 따라 선택을위한 ng-class

분류에서Dev

자바 스크립트 드롭 다운-동일한 드롭 다운에서 선택한 옵션에 따라 다른 옵션을 표시합니다.

분류에서Dev

선택 옵션에 따라 div 표시 / 숨기기

분류에서Dev

옵션 선택에 따라 div 숨기기 또는 표시

분류에서Dev

선택 태그 아래에서 선택한 옵션에 따라 div를 숨기고 표시

분류에서Dev

다른 선택 옵션에서 이미 선택한 선택 옵션 제거

분류에서Dev

선택한 옵션에 따라 어레이 선택

분류에서Dev

다중 선택에서 선택한 옵션 선택

분류에서Dev

다른 선택 옵션에 따라 값 전달

분류에서Dev

자바 스크립트에서 선택한 옵션에 따라 div 표시

분류에서Dev

문서 속성 드롭 다운 선택에 따라 직선 수직선 표시

분류에서Dev

선택한 다른 <선택> 옵션에 따라 <선택> 옵션을 비활성화하는 방법은 무엇입니까?

분류에서Dev

선택 값에 따라 div 표시

분류에서Dev

선택한 N 번째 목록 옵션에 따라 N 번째 범위 표시

분류에서Dev

열 값에 따라 다른 열 선택

분류에서Dev

내 fisrt 선택의 값에 따라 두 번째 선택에 대한 옵션을 가져옵니다.

분류에서Dev

HTML 선택 옵션은 첫 번째 선택 옵션을 선택한 후 목록을 표시합니다.

Related 관련 기사

  1. 1

    선택한 다른 옵션에 따라 선택 옵션 변경

  2. 2

    keystonejs는 다른 선택 옵션 선택에 따라 선택 옵션을 표시합니다.

  3. 3

    다른 선택에 따라 선택 목록 표시

  4. 4

    선택에서 다른 선택의 제목까지 선택한 옵션 표시

  5. 5

    다른 선택에 따라 옵션을 선택하는 방법

  6. 6

    선택한 옵션에 따라 조건부로 재질 UI 선택 (드롭 다운) 표시

  7. 7

    선택한 다른 옵션 상자에 따라 선택 상자 값 변경

  8. 8

    다른 선택 옵션에 따라 표시되는 선택을 변경하고 동일한 옵션 값을 유지합니다.

  9. 9

    내가 선택한 옵션에 따라 팝업 기준 표시

  10. 10

    다른 선택에 따라 '재 선택'선택 (jQuery)

  11. 11

    Angular JS-드롭 다운의 부울 값에 따라 표시 선택 옵션

  12. 12

    다중 선택 옵션에서 이전에 선택한 값 표시

  13. 13

    선택한 옵션에 따라 선택을위한 ng-class

  14. 14

    자바 스크립트 드롭 다운-동일한 드롭 다운에서 선택한 옵션에 따라 다른 옵션을 표시합니다.

  15. 15

    선택 옵션에 따라 div 표시 / 숨기기

  16. 16

    옵션 선택에 따라 div 숨기기 또는 표시

  17. 17

    선택 태그 아래에서 선택한 옵션에 따라 div를 숨기고 표시

  18. 18

    다른 선택 옵션에서 이미 선택한 선택 옵션 제거

  19. 19

    선택한 옵션에 따라 어레이 선택

  20. 20

    다중 선택에서 선택한 옵션 선택

  21. 21

    다른 선택 옵션에 따라 값 전달

  22. 22

    자바 스크립트에서 선택한 옵션에 따라 div 표시

  23. 23

    문서 속성 드롭 다운 선택에 따라 직선 수직선 표시

  24. 24

    선택한 다른 <선택> 옵션에 따라 <선택> 옵션을 비활성화하는 방법은 무엇입니까?

  25. 25

    선택 값에 따라 div 표시

  26. 26

    선택한 N 번째 목록 옵션에 따라 N 번째 범위 표시

  27. 27

    열 값에 따라 다른 열 선택

  28. 28

    내 fisrt 선택의 값에 따라 두 번째 선택에 대한 옵션을 가져옵니다.

  29. 29

    HTML 선택 옵션은 첫 번째 선택 옵션을 선택한 후 목록을 표시합니다.

뜨겁다태그

보관