Could not set the select option value using jquery and PHP












0















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.










share|improve this question

























  • what's the difference between con_code and dial_code ? you are selecting the 'IN' con_code but you are placing dial_code as options' values.

    – simonecosci
    Nov 15 '18 at 11:16











  • +91 is the dial code for IN.

    – user5443928
    Nov 15 '18 at 11:17











  • Can you make this correct ?

    – user5443928
    Nov 15 '18 at 11:18
















0















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.










share|improve this question

























  • what's the difference between con_code and dial_code ? you are selecting the 'IN' con_code but you are placing dial_code as options' values.

    – simonecosci
    Nov 15 '18 at 11:16











  • +91 is the dial code for IN.

    – user5443928
    Nov 15 '18 at 11:17











  • Can you make this correct ?

    – user5443928
    Nov 15 '18 at 11:18














0












0








0








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.










share|improve this question
















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.







php jquery jquery-chosen






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 15 '18 at 11:18









Robbie Averill

21.1k74077




21.1k74077










asked Nov 15 '18 at 11:08







user5443928




















  • what's the difference between con_code and dial_code ? you are selecting the 'IN' con_code but you are placing dial_code as options' values.

    – simonecosci
    Nov 15 '18 at 11:16











  • +91 is the dial code for IN.

    – user5443928
    Nov 15 '18 at 11:17











  • Can you make this correct ?

    – user5443928
    Nov 15 '18 at 11:18



















  • what's the difference between con_code and dial_code ? you are selecting the 'IN' con_code but you are placing dial_code as options' values.

    – simonecosci
    Nov 15 '18 at 11:16











  • +91 is the dial code for IN.

    – user5443928
    Nov 15 '18 at 11:17











  • Can you make this correct ?

    – user5443928
    Nov 15 '18 at 11:18

















what's the difference between con_code and dial_code ? you are selecting the 'IN' con_code but you are placing dial_code as options' values.

– simonecosci
Nov 15 '18 at 11:16





what's the difference between con_code and dial_code ? you are selecting the 'IN' con_code but you are placing dial_code as options' values.

– simonecosci
Nov 15 '18 at 11:16













+91 is the dial code for IN.

– user5443928
Nov 15 '18 at 11:17





+91 is the dial code for IN.

– user5443928
Nov 15 '18 at 11:17













Can you make this correct ?

– user5443928
Nov 15 '18 at 11:18





Can you make this correct ?

– user5443928
Nov 15 '18 at 11:18












2 Answers
2






active

oldest

votes


















0














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.






share|improve this answer


























  • Can you update using choosen-select.

    – user5443928
    Nov 15 '18 at 11:32











  • Oh, OK, I see. Editing... Done ! $sel is $('.chosen-select')

    – Jean-Marc Zimmer
    Nov 15 '18 at 11:35





















0














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>








share|improve this answer


























  • Here I am using class="chosen-select" class which is creating problem. Can you update accordingly.

    – user5443928
    Nov 15 '18 at 11:32











  • no, that class is not the problem

    – simonecosci
    Nov 15 '18 at 11:37











  • You are adding one custom class. chosen-select is one plugin. You can check using that plugin.

    – user5443928
    Nov 15 '18 at 11:41











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53318118%2fcould-not-set-the-select-option-value-using-jquery-and-php%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown
























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














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.






share|improve this answer


























  • Can you update using choosen-select.

    – user5443928
    Nov 15 '18 at 11:32











  • Oh, OK, I see. Editing... Done ! $sel is $('.chosen-select')

    – Jean-Marc Zimmer
    Nov 15 '18 at 11:35


















0














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.






share|improve this answer


























  • Can you update using choosen-select.

    – user5443928
    Nov 15 '18 at 11:32











  • Oh, OK, I see. Editing... Done ! $sel is $('.chosen-select')

    – Jean-Marc Zimmer
    Nov 15 '18 at 11:35
















0












0








0







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.






share|improve this answer















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.






$(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>





$(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>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 15 '18 at 11:34

























answered Nov 15 '18 at 11:22









Jean-Marc ZimmerJean-Marc Zimmer

38414




38414













  • Can you update using choosen-select.

    – user5443928
    Nov 15 '18 at 11:32











  • Oh, OK, I see. Editing... Done ! $sel is $('.chosen-select')

    – Jean-Marc Zimmer
    Nov 15 '18 at 11:35





















  • Can you update using choosen-select.

    – user5443928
    Nov 15 '18 at 11:32











  • Oh, OK, I see. Editing... Done ! $sel is $('.chosen-select')

    – Jean-Marc Zimmer
    Nov 15 '18 at 11:35



















Can you update using choosen-select.

– user5443928
Nov 15 '18 at 11:32





Can you update using choosen-select.

– user5443928
Nov 15 '18 at 11:32













Oh, OK, I see. Editing... Done ! $sel is $('.chosen-select')

– Jean-Marc Zimmer
Nov 15 '18 at 11:35







Oh, OK, I see. Editing... Done ! $sel is $('.chosen-select')

– Jean-Marc Zimmer
Nov 15 '18 at 11:35















0














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>








share|improve this answer


























  • Here I am using class="chosen-select" class which is creating problem. Can you update accordingly.

    – user5443928
    Nov 15 '18 at 11:32











  • no, that class is not the problem

    – simonecosci
    Nov 15 '18 at 11:37











  • You are adding one custom class. chosen-select is one plugin. You can check using that plugin.

    – user5443928
    Nov 15 '18 at 11:41
















0














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>








share|improve this answer


























  • Here I am using class="chosen-select" class which is creating problem. Can you update accordingly.

    – user5443928
    Nov 15 '18 at 11:32











  • no, that class is not the problem

    – simonecosci
    Nov 15 '18 at 11:37











  • You are adding one custom class. chosen-select is one plugin. You can check using that plugin.

    – user5443928
    Nov 15 '18 at 11:41














0












0








0







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>








share|improve this answer















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>








<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>





<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>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 15 '18 at 11:37

























answered Nov 15 '18 at 11:30









simonecoscisimonecosci

82658




82658













  • Here I am using class="chosen-select" class which is creating problem. Can you update accordingly.

    – user5443928
    Nov 15 '18 at 11:32











  • no, that class is not the problem

    – simonecosci
    Nov 15 '18 at 11:37











  • You are adding one custom class. chosen-select is one plugin. You can check using that plugin.

    – user5443928
    Nov 15 '18 at 11:41



















  • Here I am using class="chosen-select" class which is creating problem. Can you update accordingly.

    – user5443928
    Nov 15 '18 at 11:32











  • no, that class is not the problem

    – simonecosci
    Nov 15 '18 at 11:37











  • You are adding one custom class. chosen-select is one plugin. You can check using that plugin.

    – user5443928
    Nov 15 '18 at 11:41

















Here I am using class="chosen-select" class which is creating problem. Can you update accordingly.

– user5443928
Nov 15 '18 at 11:32





Here I am using class="chosen-select" class which is creating problem. Can you update accordingly.

– user5443928
Nov 15 '18 at 11:32













no, that class is not the problem

– simonecosci
Nov 15 '18 at 11:37





no, that class is not the problem

– simonecosci
Nov 15 '18 at 11:37













You are adding one custom class. chosen-select is one plugin. You can check using that plugin.

– user5443928
Nov 15 '18 at 11:41





You are adding one custom class. chosen-select is one plugin. You can check using that plugin.

– user5443928
Nov 15 '18 at 11:41


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53318118%2fcould-not-set-the-select-option-value-using-jquery-and-php%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Xamarin.iOS Cant Deploy on Iphone

Glorious Revolution

Dulmage-Mendelsohn matrix decomposition in Python