วิธี Select คล้ายๆ เลือกจังหวัด เเล้วเลือกอำเภอ แต่ผู้ใช้สามารถเพิ่มข้อมูลได้ในภายหลัง สามารถทำได้ด้วยวิธีใด #รบกวนด้วยค่ะ

<style type='text/css'>
select {
    width:180px;
}
</style>
<select id="main">
    <option value='' data-relation=''>-- Please Select One ---</option>
    <option value='1' data-relation='a'>Apple</option>
    <option value='2' data-relation='b'>Google</option>    
    <option value='3' data-relation='c'>Microsoft</option>
</select>
<select id="sub">
    <option value='1' data-refer='a'>iPad</option>
    <option value='2' data-refer='a'>iPhone</option>
    <option value='3' data-refer='a'>iPod</option>
    <option value='4' data-refer='a'>MacBook Air</option>
    <option value='5' data-refer='a'>MacBook Pro</option>
    <option value='6' data-refer='b'>Any Android Platform Devices</option>
    <option value='7' data-refer='b'>Google Glass</option>
    <option value='8' data-refer='b'>Automatic Driving Machine</option>
    <option value='9' data-refer='c'>Nokia</option>
    <option value='10' data-refer='c'>Surface</option>    
</select>

<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
<script>
$(document).ready(function(){
    $("#main").change(function(){
        var rel = $("option:selected",this).data("relation"),
            idx=0;        
        $("#sub option").each(function(index,val){ 
            if(rel=='')
                $(this).css("display","block");
            else
            if($(this).data("refer") == rel){
                $(this).css("display","block");
                idx=index;
            }else{
                $(this).css("display","none");
            }
        }).eq(idx).attr("selected","selected");
        
    });
});
</script>

<style type='text/css'>
select {
    width:180px;
}
</style>
<select id="main">
    <option value='' data-relation=''>-- Please Select One ---</option>
    <option value='1' data-relation='a'>Apple</option>
    <option value='2' data-relation='b'>Google</option>    
    <option value='3' data-relation='c'>Microsoft</option>
</select>
<select id="sub">
    <option value='1' data-refer='a'>iPad</option>
    <option value='2' data-refer='a'>iPhone</option>
    <option value='3' data-refer='a'>iPod</option>
    <option value='4' data-refer='a'>MacBook Air</option>
    <option value='5' data-refer='a'>MacBook Pro</option>
    <option value='6' data-refer='b'>Any Android Platform Devices</option>
    <option value='7' data-refer='b'>Google Glass</option>
    <option value='8' data-refer='b'>Automatic Driving Machine</option>
    <option value='9' data-refer='c'>Nokia</option>
    <option value='10' data-refer='c'>Surface</option>    
</select>

<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
<script>
$(document).ready(function(){
    $("#main").change(function(){
        var rel = $("option:selected",this).data("relation");     
        $("#sub option[data-refer!='"+rel+"']").css("display","none");
        $("#sub option[data-refer='"+rel+"']").css("display","block").eq(0).attr("selected","selected");
    });
});
</script>

<style type='text/css'>
select {
    width:180px;
}
</style>
<select id="main">
?*****
</select>
<select id="sub">
?*****
</select>

<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
<script>
$(document).ready(function(){
    $("#main").change(function(){
        var rel = $("option:selected",this).data("relation");     
        $("#sub option[data-refer!='"+rel+"']").css("display","none");
        $("#sub option[data-refer='"+rel+"']").css("display","block").eq(0).attr("selected","selected");
    });
});
</script>