jquery를 사용하여 첫 번째 선택 상자에서 선택한 값을 기준으로 두 번째 선택 상자의 추가 옵션을 비활성화하는 방법

Question

아래 2 개의 선택 상자가 있습니다.

부모의 선택 박스

<select name="user_type" id="user_type"> 
    <option value="">Please Choose An Option</option> 
    <option value="PRIVATE OWNER">PRIVATE OWNER</option> 
    <option value="TRADER">TRADER</option> 
</select> 

아이 선택 박스

개인 소유자가 표시되어야 친 후 선택 박스에만 단일 항목 및 특집 항목에서 선택하고 나머지는 제거되면 내가 원하는

<select name="package_type" id="package_type"> 
    <option value="">Please Choose An Option</option> 
    <option value="SINGLE ENTRY">SINGLE ENTRY</option> 
    <option value="FEATURED ENTRY">FEATURED ENTRY</option> 
    <option value="STANDARD">STANDARD</option> 
    <option value="ULTIMATE">ULTIMATE</option> 
</select> 

또는 jquery를 사용하여 삭제되었습니다.

나는 이것을 달성하는 방법에 대한 단서가 없다.

다음은 내 jquery 코드입니다. 태그를 동적으로 추가하거나 제거하는 방법을 모르는 상태에서 내가 묻는 것에 대한 로직 코드는 포함되어 있지 않습니다. 내 자신의 논리 세션 및 데이터베이스에서 값을 가져 오는 등 JQuery와 변수

에게 제공하기로

또한 아래의 코드에서 PHP 부분을 제외하십시오 제가이 일을 달성 할 수있는 방법을 알려 주시기 바랍니다.

<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() { 
<?php 
// Pre Populate User From Session 
$user_type = $session->getSession("packages_user_type"); 
if ($user_type != "TRADER") 
{ 
?> 
    $('#package_type_container, #slots_container, #notes_ultimate').hide(); 
<? 
} 
?> 
    $('#user_type').change(function() 
    { 
     var user_type = $(this).val(); 
     if(user_type == "TRADER") 
     { 
      $('#package_type_container').slideDown().show(); 
      $('#slots_container').slideDown().show(); 
     } 
     else 
     { 
      $("#package_type").find("option:selected").removeAttr('selected'); 
      $('#package_type_container').slideUp(); 
      $('#slots_container').slideUp(); 
     } 
    }); 

    $('#package_type').change(function() 
    { 
     var package_type = $(this).val(); 
     if(package_type == "SINGLE ENTRY") 
     { 
      $('#slots').val('1').attr('readonly', true); 
      $('#cost').val('').removeAttr('readonly'); 
     } 
     else if(package_type == "FEATURED ENTRY") 
     { 
      $('#slots').val('1').attr('readonly', true); 
      $('#cost').val('').removeAttr('readonly'); 
     } 
     else if (package_type == "ULTIMATE") 
     { 
      $('#notes_ultimate').slideDown().show(); 
      $('#slots').val('').removeAttr('readonly'); 
      $('#cost').val('0').attr('readonly', true); 
     } 
     else 
     { 
      $('#notes_ultimate').hide(); 
      $('#slots').val('').removeAttr('readonly'); 
      $('#cost').val('').removeAttr('readonly'); 
     } 
    }); 
}); 
</script> 

Answer 1

그런 다음 나는 사이의 HTML에서의 관계를 정의하는 명시 적으로 좋을 것 이후

var $popts = $('#package_type option'); // store all available options 
var sel = { 
    "default": $popts.eq(0), 
    "PRIVATE OWNER": $popts.slice(1,3), // available values for PRIVATE OWNER 
    "TRADER": $popts.slice(1) // available values for TRADER 
}; 

$('#user_type').change(function(){ 
    // detach all options 
    $('#package_type option').detach(); 
    // if value is '' then append the default - else append the correct options 
    $('#package_type').append(this.value == '' ? sel['default'] : sel[this.value]);  
});​ 

FIDDLE

Answer 2

을 관련 옵션을 추가하는 옵션을 제거 .detach()를 사용하여이 같은 작업을 수행 할 수 있습니다 선택 사항 인 option (을 사용)에 대한 응답으로 두 번째 에있는 option이 사용 가능해야 함을 나타내는 옵션

HTML :

<select name="user_type" id="user_type"> 
    <option value="">Please Choose An Option</option> 
    <option value="private owner">private owner</option> 
    <option value="trader">trader</option> 
</select> 

<select name="package_type" id="package_type"> 
    <option value="">Please Choose An Option</option> 
    <option value="single entry" data-relatesTo="privateOwner trader">single entry</option> 
    <option value="featured entry" data-relatesTo="privateOwner trader">featured entry</option> 
    <option value="standard" data-relatesTo="trader">standard</option> 
    <option value="ultimate" data-relatesTo="trader">ultimate</option> 
</select>​ 

jQuery를 :

$('#user_type').change(
    function() { 
     // camel-cases the value of the selected option 
     var v = $(this).val().replace(/\s+(\w)/, function(a) { 
      return a.replace(/(^\s+)/, '').toUpperCase(); 
     }); 
     // finds all disabled options and un-disables/enables them 
     $('#package_type option:disabled').prop('disabled', false); 
     // selects all options in the second select 
     $('#package_type option').filter(

     function() { 
      // caches the current $(this) object, since we might use it more than once 
      var that = $(this); 
      // returns the current $(this) if it has a value that's not an empty string 
      // AND 
      // if the camel-cased value (from above) is *not* found in the 
      // data-relatesTo attribute 
      return that.val() !== '' && that.attr('data-relatesTo').indexOf(v) === -1; 
     }).prop('disabled', true); 
    });​ 

JS Fiddle demo 처음부터210 속성), 그래서 나는 다음과 같은 일을 사용하십시오.

참고 :

• 자바 스크립트 :

  • indexOf().
  • regular expressions.
  • replace().
  • String.toUpperCase().

• jQuery를 :

  • attr().
  • change().
  • :disabled selector.
  • filter().
  • prop().
  • val().