Question

I am having 2 select box, code below.

Parent Selectbox

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

Child Selectbox

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

I want if private owner is selected from the parent selectbox then only SINGLE ENTRY and FEATURED ENTRY SHOULD SHOW UP and rest of them are removed or deleted using jquery.

I dont have any clue about how to achieve this.

Below is my jquery code, it doesnt include the code for the logic about what I am asking as I have no idea how to dynamically add or remove tags.

Also please exclude the php part in below code as it my own logic to fetch the values from session and database and provide them to jquery variables etc.

Please let me know how can I achieve this thing.

<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

You can do something like this using .detach() to remove the options then appending the relevant options afterwards

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