Odtnhj

I have an issue. I need to set the select value as text in the select box using jQuery but unable to do it.

<select name="countryCode" class="chosen-select" id="countryCode" required>
 <?php foreach ($countrydata as $key => $value) 
 if ($value['con_code']=='IN') 
 $select='selected';
 else
 $select='';
 
 ?>
 <option data-text="<?php echo $value['country']; ?>" value="<?php echo $value['dial_code']; ?>" <?php echo $select; ?>><?php echo $value['country']; ?></option>
 <?php ?>
</select>

My script part is given below.

$('#countryCode').find(':selected').html($('#countryCode').find(':selected').attr('value')); // already changed onload 
 $('#countryCode').on('change mouseleave', function () 
 $('#countryCode option').each(function () 
 $(this).html($(this).attr('data-text'));
 );
 $('#countryCode option:selected').html($('#countryCode option:selected').attr('value'));
 $(this).blur();
 );
 $('#countryCode').on('focus', function () 
 $('#countryCode option').each(function () 
 $(this).html($(this).attr('data-text'));
 );
 );

What I need is that when the user selects any text, it's value will be shown to the user. In my code it's not happening like this.

1st: a little optimization of your JS :

$('#countryCode option:selected').html($(this).val());// already changed onload

Now, how to select an option using JS :

$(function() 
 var $sel = $('.chosen-select');
 $('#exists').click(function() 
 $sel.val('option3');
 console.log($sel.val());
 );
 $('#disabled').click(function() 
 $sel.val('option2');
 console.log($sel.val());
 );
 $('#noExist').click(function() 
 $sel.val('option5');
 console.log($sel.val());
 );
 $sel.on('change', function() 
 console.log($sel.val());
 );
);

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<button id="exists">Select 3rd option</button>
<button id="disabled">Select disabled option</button>
<button id="noExist">Select inexistant option</button>
<select class="chosen-select">
 <option>option1</option>
 <option disabled>option2</option>
 <option>option3</option>
 <option selected>option4</option>
</select>
<button onclick="console.clear();">X</button>

As you can see, only existant and not disabled options can be selected.

should be something like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function()
 $('#countryCode').on('change', function()
 var val = $(this).val();
 $(this).find("option").each(function()
 $(this).text($(this).attr("data-text"));
 );
 $(this).find(":selected").text(val);
 ).trigger("change"); 
);
</script>
<select id="countryCode" class="chosen-select">
 <option data-text="A Text" value="A value">A Text</option>
 <option data-text="B Text" value="B value">B Text</option>
 <option data-text="C Text" value="C value" selected>C Text</option>
</select>