how to get selected value in jquery on change event

hello guys, i want to update product dropdown value based on supplier dropdown click but in my code i have use foreach so that's why i change particular product dropdown change but output will all the product dropdown change

here is my code

@foreach($proformaInvoiceItem as $key => $list)
<tr>
	<td>
        	<select class="form-control piliSupplierId" name="supplier" id="pili_sup_id">
            	@foreach(Helper::SupplierAll() as $sid)
               		<option value={{ $sid->id }}  {{ $sid->id == $list->pili_sup_id ? 'selected' : '' }}> {{ $sid->name }}</option>
				@endforeach
       		</select>
  	</td>
	<td>
      	<select class="form-control piliProductId" name="product" id="pili_prd_id">
          	@foreach(Helper::productAll() as $pid)
             	<option value={{ $pid->id }}  {{ $pid->id == $list->pili_prd_id ? 'selected' : '' }}> {{ $pid->id }} </option>
          	@endforeach
      	</select>
  	</td>
</tr>
@endforeach

here is my jqeury code

	$('select[name="supplier"]').on('change', function () {
        	var id = $(this).val();            
            var pid = $(this).closest('.card-body').find('select[name="product"]');
            $.ajax({
                url: "{{url('proformainvoiceitem/fetch-products')}}",
                type: "get",
                data: {
                    sid: id,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (result) {
                    pid.empty();                     
                    $.each(result.products, function (key, value) {
                        console.log(value.id);
                        pid.append('<option value="' + value
                            .id + '">' + value.id + '</option>');
                    });
                }
            });
        });

i want to display i have select any of supplier than change particular product dropdown change not all dropdown change but i cant

dev-mike

3 years ago

Level 1

Try this

var id = $(this).find('option:selected').val();         
pid = $(this).closest('.card-body').find('select[name="product"] option:selected').val();

instead of

var id = $(this).val();       
pid = $(this).closest('.card-body').find('select[name="product"]');

1 like

vandan

3 years ago

Level 13

@dev-mike when i change pid = $(this).closest('.card-body').find('select[name="product"] option:selected').val(); this line how to append pid because we set .val() also i try this line but same issue i change dropdown value then all dropdown will changed

dev-mike

3 years ago

Best Answer

Level 1

@vandan in that case you need to pass the selected supplier as a param in productAll($supplier) to distinguish the supplier's products and then render the product's select input on the basis supplier

Method 2--> in the product's select input you need to pass the supplier's ID or some unique value that signifies that this product belongs to that supplier, So that we can Identify options and then we can separate products on basis of the supplier.

In my opinion, the first method is much more suitable.

1 like

vandan

3 years ago

Level 13

@dev-mike

$(document).on("change","select.erp-field-pili_sup_id", function () {
        var id = $(this).find('option:selected').val();
        var field = $(this).closest('tr');
        $.ajax({
            url: "{{url('proformainvoiceitem/fetch-products')}}",
            type: "get",
            data: {sid: id, _token: '{{csrf_token()}}'},
            dataType: 'json',
            success: function (result) {
                field.find('select.erp-field-pili_prd_id').html('');
                field.find('select.erp-field-pili_prd_id').append('<option value="0"> Select Product </option>');
                $.each(result.products, function (key, value) {
                    field.find('select.erp-field-pili_prd_id').append(`
                        <option value="${value.id}">
                            ${value.prd_supplier_item}
                        </option>
                    `);
                });                
            }
        });
    });

@dev-mike thank you for suggestion i will do it this method

malcomjarr

2 years ago

Level 1

To get the selected value in jQuery on the change event of a select element, you can use the val() function to retrieve the selected value.

$('#mySelect').on('change', function() { var selectedValue = $(this).val(); console.log(selectedValue); });

#mySelect is the ID of the select element you want to listen to for changes. The on('change', ...) function sets up an event listener for the change event on that select element. When the value of the select element changes, the callback function is executed.

Inside the callback function, $(this) refers to the select element itself. By calling .val() on $(this), you can retrieve the selected value. In this case, the selected value is stored in the selectedValue variable. You can then use it as needed, such as logging it to the console.

https://net-informations.com/jq/pro/change.htm

Please or to participate in this conversation.