How the select function automatically turn into "Please Select" word？ - php

Question

I have a question about the "select" function. I have two input "select" functions. When I select the first input option, then I select the second input option. If I go back to the first input option to change other options, how can the second one automatically turn into "Please Select"word?
Below is my coding:
<label for="cp8" class="control-label col-lg-4">Merchant</label>
<div class="col-lg-5">
<select class="form-control required" id="branch_id3" name="branch_id3">
<option value="" selected>Please Select</option>
<!--<option value="0" selected>All</option>-->
<?php
$sql_branch = 'SELECT * FROM merchant_list;';
$arr_branch = db_conn_select($sql_branch);
foreach ($arr_branch as $rs_branch) {
echo '<option value="' . $rs_branch['id'] . '">' . $rs_branch['shop_name'] . '</option>';
}
?>
</select>
</div><br><br><br>
<label for="cp8" class="control-label col-lg-4">Merchant Types</label>
<div class="col-lg-5">
<select class="form-control required" id="merchant_type" name="merchant_type">
<option value="" selected>Please Select</option>
<option value="1">Event Sponsored</option>
<option value="2">Normal Merchant</option>
</select>
</div><br><br><br>
Below is my output picture:
Output
For example:
First I choose the Merchant option is "PALVO", then I choose the Merchant Types is "Event Sponsored". After that, if I want go back the Merchant to change other option, the Merchant Types will automatically turn to "Please Select" option. So that, my question is how to automatically make Merchant Types turn to "Please Select" option? Thanks for helping.

Answer 1

i hope this is what you looking for
$('#option').change(function(){
$('#type').val(0);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="option">
<option>Please Select</option>
<option>Option</option>
<option>Option1</option>
<option>Option2</option>
</select>
<select id="type">
<option value="0">Please Select</option>
<option>Type</option>
<option>Type1</option>
<option>Type2</option>
</select>

Answer 2

You can use jquery change for manipulating DOM element.
If you do not want to disable second select you can remove diabled attribute from select tag.
And also remove this from jquery code $("#select2").removeAttr('disabled');
$(document).ready(function(){
$("#select1").on('change',function(){
$("#select2").val('Please Select');
$("#select2").removeAttr('disabled');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Select Value:
<select id="select1">
<option>Please Select</option>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
<select id="select2" disabled>
<option>Please Select</option>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>

Answer 3

Use .val() on select DOM , and give option's value it will be selected.
With this check what is selected in first select then use .val()
$("#events").click(function(){
if($("#events option:selected").text() == "Reset First Select"){
$("#merchants").val('Please Select');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Merchants:
<select id="merchants">
<option>Please Select</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select><br>
Event:
<select id="events">
<option>Reset First Select</option>
<option selected>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select><br>
EDIT:
I have just added that when in second option reset first option will be selected it will select first