Select box not showing correct value after complete page load

The two fields are being overridden by jQuery OR JS and I'm unable to locate those lines of code.

Complete Detail:

The values for those fields (select box and input box) were stored in hidden input fields, and there was jQuery code to pull the value and set in fields after page load. It stopped working somehow and I tried to debug the problem with no luck. So I decided to get rid of JS code and move to PHP, after the migration now field values are being set by PHP. After finishing, I noticed the issue still exist; after spending a lot of time I found that value exist in fields and set to default after complete load. So my best guess says there is something happening with JS. I tried to find string in entire project but don't find any JS/jQuery code which could cause this issue.

While Loading: (shows correct value)

<select name="days">

   <option value="">Select a Day</option>

   <option value="Mo" selected="selected">Monday</option>

   <option value="Mo">Tuesday</option>

 </select>



 <input type="number" value="10" />

After Load:

The code is same in inspector but it shows default value for select box "Select a Day" and empty number field. enter image description here

You can see in attachment, the value "Mo" has selected attribute but it is showing default value. NOTE: It does show correct value "Monday" while loading.

Don't have any idea, what's wrong and never face any problem like this. I've tried several tricks like clearing browser session etc but without any luck.

asked Nov 13 '18 at 15:19

Alena

127313

add a comment |

The two fields are being overridden by jQuery OR JS and I'm unable to locate those lines of code.

Complete Detail:

While Loading: (shows correct value)

<select name="days">

   <option value="">Select a Day</option>

   <option value="Mo" selected="selected">Monday</option>

   <option value="Mo">Tuesday</option>

 </select>



 <input type="number" value="10" />

After Load:

The code is same in inspector but it shows default value for select box "Select a Day" and empty number field. enter image description here

You can see in attachment, the value "Mo" has selected attribute but it is showing default value. NOTE: It does show correct value "Monday" while loading.

Don't have any idea, what's wrong and never face any problem like this. I've tried several tricks like clearing browser session etc but without any luck.

asked Nov 13 '18 at 15:19

Alena

127313

add a comment |

The two fields are being overridden by jQuery OR JS and I'm unable to locate those lines of code.

Complete Detail:

While Loading: (shows correct value)

<select name="days">

   <option value="">Select a Day</option>

   <option value="Mo" selected="selected">Monday</option>

   <option value="Mo">Tuesday</option>

 </select>



 <input type="number" value="10" />

After Load:

The code is same in inspector but it shows default value for select box "Select a Day" and empty number field. enter image description here

You can see in attachment, the value "Mo" has selected attribute but it is showing default value. NOTE: It does show correct value "Monday" while loading.

Don't have any idea, what's wrong and never face any problem like this. I've tried several tricks like clearing browser session etc but without any luck.

asked Nov 13 '18 at 15:19

Alena

127313

The two fields are being overridden by jQuery OR JS and I'm unable to locate those lines of code.

Complete Detail:

While Loading: (shows correct value)

<select name="days">

   <option value="">Select a Day</option>

   <option value="Mo" selected="selected">Monday</option>

   <option value="Mo">Tuesday</option>

 </select>



 <input type="number" value="10" />

After Load:

The code is same in inspector but it shows default value for select box "Select a Day" and empty number field. enter image description here

You can see in attachment, the value "Mo" has selected attribute but it is showing default value. NOTE: It does show correct value "Monday" while loading.

Don't have any idea, what's wrong and never face any problem like this. I've tried several tricks like clearing browser session etc but without any luck.

javascript jquery drop-down-menu

asked Nov 13 '18 at 15:19

Alena

127313

asked Nov 13 '18 at 15:19

Alena

127313

asked Nov 13 '18 at 15:19

Alena

127313

asked Nov 13 '18 at 15:19

Alena

127313

asked Nov 13 '18 at 15:19

Alena

127313

add a comment |

2 Answers
2

active

oldest

votes

What you can do, is force the selected value with jQuery.

var select = $('[name="days"]');

select.val("");

var options = select.find('option');



$.each(options, function() {

  if ($(this).attr('selected') !== undefined) {

     select.val($(this).val());

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="days">

   <option value="">Select a Day</option>

   <option value="Mo" selected="selected">Monday</option>

   <option value="Mo">Tuesday</option>

 </select>

In this code snippet, I am simulating that the null value is selected and I am trying to change it for the option that has the selected attribute. Hope it works.

answered Nov 13 '18 at 15:31

Alain Cruz

1,7683818

thanks for your answer, but it didn't solve the problem. It adds selected attribute. But doesn't show correct value.

– Alena
Nov 13 '18 at 15:49

That means there has to be another JS causing the issue. With this code, we are forcing to select the selected value, just like the snippet. Is there any js we should see?

– Alain Cruz
Nov 13 '18 at 16:03

That's what, I'm trying to find. Unfortunately, it is available in local machine so can't be viewed live. However, you can check above posted screenshot...

– Alena
Nov 13 '18 at 16:04

I saw the issue, what I find odd, is that it is not working. Even with my workaround. Well my solution should work for sure if import it as the last js script file or in the bottom of the body. I mean, if it don’t there is something really odd in your page :(

– Alain Cruz
Nov 13 '18 at 16:07

Well, that's not true because that solution doesn't work in inspector console. If it work there then we could assume that we should execute this at the very end.

– Alena
Nov 13 '18 at 16:19

|
show 8 more comments

The correct way to use the selected attribute is just to add it.
you don't need to say selected = "selected", just add the attribute
link to documentation

answered Nov 13 '18 at 15:36

Glenn van Acker

115

I mentioned that it works while loading but goes back to default when page is completely loaded. But I still tried your solution but it didn't work! :(

– Alena
Nov 13 '18 at 15:40

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53284135%2fselect-box-not-showing-correct-value-after-complete-page-load%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

What you can do, is force the selected value with jQuery.

var select = $('[name="days"]');

select.val("");

var options = select.find('option');



$.each(options, function() {

  if ($(this).attr('selected') !== undefined) {

     select.val($(this).val());

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="days">

   <option value="">Select a Day</option>

   <option value="Mo" selected="selected">Monday</option>

   <option value="Mo">Tuesday</option>

 </select>

In this code snippet, I am simulating that the null value is selected and I am trying to change it for the option that has the selected attribute. Hope it works.

answered Nov 13 '18 at 15:31

Alain Cruz

1,7683818

thanks for your answer, but it didn't solve the problem. It adds selected attribute. But doesn't show correct value.

– Alena
Nov 13 '18 at 15:49

That means there has to be another JS causing the issue. With this code, we are forcing to select the selected value, just like the snippet. Is there any js we should see?

– Alain Cruz
Nov 13 '18 at 16:03

That's what, I'm trying to find. Unfortunately, it is available in local machine so can't be viewed live. However, you can check above posted screenshot...

– Alena
Nov 13 '18 at 16:04

I saw the issue, what I find odd, is that it is not working. Even with my workaround. Well my solution should work for sure if import it as the last js script file or in the bottom of the body. I mean, if it don’t there is something really odd in your page :(

– Alain Cruz
Nov 13 '18 at 16:07

Well, that's not true because that solution doesn't work in inspector console. If it work there then we could assume that we should execute this at the very end.

– Alena
Nov 13 '18 at 16:19

|
show 8 more comments

What you can do, is force the selected value with jQuery.

var select = $('[name="days"]');

select.val("");

var options = select.find('option');



$.each(options, function() {

  if ($(this).attr('selected') !== undefined) {

     select.val($(this).val());

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="days">

   <option value="">Select a Day</option>

   <option value="Mo" selected="selected">Monday</option>

   <option value="Mo">Tuesday</option>

 </select>

In this code snippet, I am simulating that the null value is selected and I am trying to change it for the option that has the selected attribute. Hope it works.

answered Nov 13 '18 at 15:31

Alain Cruz

1,7683818

thanks for your answer, but it didn't solve the problem. It adds selected attribute. But doesn't show correct value.

– Alena
Nov 13 '18 at 15:49

That means there has to be another JS causing the issue. With this code, we are forcing to select the selected value, just like the snippet. Is there any js we should see?

– Alain Cruz
Nov 13 '18 at 16:03

That's what, I'm trying to find. Unfortunately, it is available in local machine so can't be viewed live. However, you can check above posted screenshot...

– Alena
Nov 13 '18 at 16:04

I saw the issue, what I find odd, is that it is not working. Even with my workaround. Well my solution should work for sure if import it as the last js script file or in the bottom of the body. I mean, if it don’t there is something really odd in your page :(

– Alain Cruz
Nov 13 '18 at 16:07

Well, that's not true because that solution doesn't work in inspector console. If it work there then we could assume that we should execute this at the very end.

– Alena
Nov 13 '18 at 16:19

|
show 8 more comments

What you can do, is force the selected value with jQuery.

var select = $('[name="days"]');

select.val("");

var options = select.find('option');



$.each(options, function() {

  if ($(this).attr('selected') !== undefined) {

     select.val($(this).val());

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="days">

   <option value="">Select a Day</option>

   <option value="Mo" selected="selected">Monday</option>

   <option value="Mo">Tuesday</option>

 </select>

In this code snippet, I am simulating that the null value is selected and I am trying to change it for the option that has the selected attribute. Hope it works.

answered Nov 13 '18 at 15:31

Alain Cruz

1,7683818

What you can do, is force the selected value with jQuery.

var select = $('[name="days"]');

select.val("");

var options = select.find('option');



$.each(options, function() {

  if ($(this).attr('selected') !== undefined) {

     select.val($(this).val());

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="days">

   <option value="">Select a Day</option>

   <option value="Mo" selected="selected">Monday</option>

   <option value="Mo">Tuesday</option>

 </select>

In this code snippet, I am simulating that the null value is selected and I am trying to change it for the option that has the selected attribute. Hope it works.

var select = $('[name="days"]');

select.val("");

var options = select.find('option');



$.each(options, function() {

  if ($(this).attr('selected') !== undefined) {

     select.val($(this).val());

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="days">

   <option value="">Select a Day</option>

   <option value="Mo" selected="selected">Monday</option>

   <option value="Mo">Tuesday</option>

 </select>

var select = $('[name="days"]');

select.val("");

var options = select.find('option');



$.each(options, function() {

  if ($(this).attr('selected') !== undefined) {

     select.val($(this).val());

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="days">

   <option value="">Select a Day</option>

   <option value="Mo" selected="selected">Monday</option>

   <option value="Mo">Tuesday</option>

 </select>

answered Nov 13 '18 at 15:31

Alain Cruz

1,7683818

answered Nov 13 '18 at 15:31

Alain Cruz

1,7683818

answered Nov 13 '18 at 15:31

Alain Cruz

1,7683818

answered Nov 13 '18 at 15:31

Alain Cruz

1,7683818

thanks for your answer, but it didn't solve the problem. It adds selected attribute. But doesn't show correct value.

– Alena
Nov 13 '18 at 15:49

That means there has to be another JS causing the issue. With this code, we are forcing to select the selected value, just like the snippet. Is there any js we should see?

– Alain Cruz
Nov 13 '18 at 16:03

That's what, I'm trying to find. Unfortunately, it is available in local machine so can't be viewed live. However, you can check above posted screenshot...

– Alena
Nov 13 '18 at 16:04

I saw the issue, what I find odd, is that it is not working. Even with my workaround. Well my solution should work for sure if import it as the last js script file or in the bottom of the body. I mean, if it don’t there is something really odd in your page :(

– Alain Cruz
Nov 13 '18 at 16:07

Well, that's not true because that solution doesn't work in inspector console. If it work there then we could assume that we should execute this at the very end.

– Alena
Nov 13 '18 at 16:19

|
show 8 more comments

thanks for your answer, but it didn't solve the problem. It adds selected attribute. But doesn't show correct value.

– Alena
Nov 13 '18 at 15:49

That means there has to be another JS causing the issue. With this code, we are forcing to select the selected value, just like the snippet. Is there any js we should see?

– Alain Cruz
Nov 13 '18 at 16:03

That's what, I'm trying to find. Unfortunately, it is available in local machine so can't be viewed live. However, you can check above posted screenshot...

– Alena
Nov 13 '18 at 16:04

I saw the issue, what I find odd, is that it is not working. Even with my workaround. Well my solution should work for sure if import it as the last js script file or in the bottom of the body. I mean, if it don’t there is something really odd in your page :(

– Alain Cruz
Nov 13 '18 at 16:07

Well, that's not true because that solution doesn't work in inspector console. If it work there then we could assume that we should execute this at the very end.

– Alena
Nov 13 '18 at 16:19

thanks for your answer, but it didn't solve the problem. It adds selected attribute. But doesn't show correct value.

– Alena
Nov 13 '18 at 15:49

That means there has to be another JS causing the issue. With this code, we are forcing to select the selected value, just like the snippet. Is there any js we should see?

– Alain Cruz
Nov 13 '18 at 16:03

That's what, I'm trying to find. Unfortunately, it is available in local machine so can't be viewed live. However, you can check above posted screenshot...

– Alena
Nov 13 '18 at 16:04

I saw the issue, what I find odd, is that it is not working. Even with my workaround. Well my solution should work for sure if import it as the last js script file or in the bottom of the body. I mean, if it don’t there is something really odd in your page :(

– Alain Cruz
Nov 13 '18 at 16:07

Well, that's not true because that solution doesn't work in inspector console. If it work there then we could assume that we should execute this at the very end.

– Alena
Nov 13 '18 at 16:19

|
show 8 more comments

The correct way to use the selected attribute is just to add it.
you don't need to say selected = "selected", just add the attribute
link to documentation

answered Nov 13 '18 at 15:36

Glenn van Acker

115

I mentioned that it works while loading but goes back to default when page is completely loaded. But I still tried your solution but it didn't work! :(

– Alena
Nov 13 '18 at 15:40

add a comment |

The correct way to use the selected attribute is just to add it.
you don't need to say selected = "selected", just add the attribute
link to documentation

answered Nov 13 '18 at 15:36

Glenn van Acker

115

I mentioned that it works while loading but goes back to default when page is completely loaded. But I still tried your solution but it didn't work! :(

– Alena
Nov 13 '18 at 15:40

add a comment |

The correct way to use the selected attribute is just to add it.
you don't need to say selected = "selected", just add the attribute
link to documentation

answered Nov 13 '18 at 15:36

Glenn van Acker

115

The correct way to use the selected attribute is just to add it.
you don't need to say selected = "selected", just add the attribute
link to documentation

answered Nov 13 '18 at 15:36

Glenn van Acker

115

answered Nov 13 '18 at 15:36

Glenn van Acker

115

answered Nov 13 '18 at 15:36

Glenn van Acker

115

answered Nov 13 '18 at 15:36

Glenn van Acker

115

I mentioned that it works while loading but goes back to default when page is completely loaded. But I still tried your solution but it didn't work! :(

– Alena
Nov 13 '18 at 15:40

add a comment |

I mentioned that it works while loading but goes back to default when page is completely loaded. But I still tried your solution but it didn't work! :(

– Alena
Nov 13 '18 at 15:40

I mentioned that it works while loading but goes back to default when page is completely loaded. But I still tried your solution but it didn't work! :(

– Alena
Nov 13 '18 at 15:40

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky