bring up select options from multiple select options-CodePudding

here I have a list of accounts (unlimited) using select option with

here I want to select with if the value of <option value = '1'> then it will appear other select option, and if the value of <option value = '0'> then the previous select option will be lost, I have succeeded do it

the problem here i am using multiple Akun, i will give an example of 3 Akun but in my case the original is unlimited, i want for example when i select one account with value = '1' it will show choose another option in class 'box' itself, and the problem is that I'm here instead of appearing from all accounts not one by one

this is my code sample, i will accept if there is any other way besides this code i use, thanks

$('.selects').on('change', function(){
    var kdbantu = $(this).val();
    
    if(kdbantu == '1'){
        $('.box-tx').fadeOut(0, function(){ $(this).remove(); });
        $(".box").append(`
            <select >
                <option>A</option> 
                <option>B</option> 
                <option>C</option> 
            </select>
        `);   
    }else{
        $('.box-tx').fadeOut(0, function(){ $(this).remove(); });
    }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Akun 1 :
<div >
    <select >
         <option value="0"></option>
         <option value="0">0- Kas</option>
         <option value="0">0- Bank</option>
         <option value="1">1- Piutang</option>
         <option value="1">1- Jenis Usaha</option>
         <option value="0">0- Penjualan</option>
         <option value="1">1- Biaya</option>
    </select>
</div>

<hr>

Akun 2 :
<div >
    <select >
         <option value="0"></option>
         <option value="0">0- Kas</option>
         <option value="0">0- Bank</option>
         <option value="1">1- Piutang</option>
         <option value="1">1- Jenis Usaha</option>
         <option value="0">0- Penjualan</option>
         <option value="1">1- Biaya</option>
    </select>
</div>

<hr>

Akun 3 :
<div >
    <select >
         <option value="0"></option>
         <option value="0">0- Kas</option>
         <option value="0">0- Bank</option>
         <option value="1">1- Piutang</option>
         <option value="1">1- Jenis Usaha</option>
         <option value="0">0- Penjualan</option>
         <option value="1">1- Biaya</option>
    </select>
</div>

CodePudding user response：

So I changed this line:

$(".box").append

To this:

$(this).parent().append

And I think it's achieved what you wanted.

Basically instead of grabbing every single div with the .box class, we just grab the one being interacted with the same way you did with var kdbantu and then from there we select the parent() node and append our change.