Select box value not changing

up vote
-1
down vote

favorite

I have a html select box which I am appending new options to depending on the selection from a previous select box. Before I append the new options I need to empty the select box so only the options required appear.

The append works fine and the options change and can be selected from the '2nd_incident' select box, however as soon as I incorporate .empty() the options still change as I want but when you actually try to select them from the select box the value in the select does not change.

Logging the value to the console confirms that the value has changed but it just doesn't change visually.

I have also tried .html() in place of the .empty() and .append() but this also has the same issue.

$("#load_section3").change(function() {



  var first_incident = document.getElementById('1st_incident').value;

  var second_incident = document.getElementById('2nd_incident');



  console.log(second_incident.value);



  if (first_incident == 1) {



    //remove na and input options into next select box



    $('#2nd_incident').empty().end();



    $('#2nd_incident').append('<option > Please Select </option>' +

      '<option > something1 </option>' +

      '<option > something2 </option>' +

      '<option > something3 </option>' +

      '<option > something3 </option>');







  } else if (first_incident == 2) {



    $('#2nd_incident').empty().append('<option> Please Select </option>' +

      '<option> somethings1 </option>' +

      '<option> somethings2 </option>' +

      '<option> somethings3  </option>');



  } else {



    $('#2nd_incident').empty();

    $('#2nd_incident').append('<option> NA </option>');



  }



})

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

<div id="load_section3">

  <select class="inputs" id="1st_incident">

    <option> 1 </option>

    <option> 2 </option>

    <option> 3 </option>



  </select>



  <select class="inputs" id="2nd_incident">

    <option value="Test">NA</option>

  </select>

</div>

Any help will be appreciated as I feel as though I have been googling this for weeks now.

edited Nov 7 at 9:28

Chris G

5,8392821

asked Nov 7 at 9:24

Chunky Lova

1

The problem is that as soon as you select something from the 2nd dropdown, the change event gets triggered and the 2nd dropdown is emptied and rewritten. So while the choice is logged correctly, this resets the selected index to 0. A quick way to fix this is to replace $("#load_section3").change with $("#1st_incident").change
– Chris G
Nov 7 at 9:32

This worked, thank you !!
– Chunky Lova
Nov 7 at 9:35

add a comment |

up vote
-1
down vote

favorite

Logging the value to the console confirms that the value has changed but it just doesn't change visually.

I have also tried .html() in place of the .empty() and .append() but this also has the same issue.

$("#load_section3").change(function() {



  var first_incident = document.getElementById('1st_incident').value;

  var second_incident = document.getElementById('2nd_incident');



  console.log(second_incident.value);



  if (first_incident == 1) {



    //remove na and input options into next select box



    $('#2nd_incident').empty().end();



    $('#2nd_incident').append('<option > Please Select </option>' +

      '<option > something1 </option>' +

      '<option > something2 </option>' +

      '<option > something3 </option>' +

      '<option > something3 </option>');







  } else if (first_incident == 2) {



    $('#2nd_incident').empty().append('<option> Please Select </option>' +

      '<option> somethings1 </option>' +

      '<option> somethings2 </option>' +

      '<option> somethings3  </option>');



  } else {



    $('#2nd_incident').empty();

    $('#2nd_incident').append('<option> NA </option>');



  }



})

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

<div id="load_section3">

  <select class="inputs" id="1st_incident">

    <option> 1 </option>

    <option> 2 </option>

    <option> 3 </option>



  </select>



  <select class="inputs" id="2nd_incident">

    <option value="Test">NA</option>

  </select>

</div>

Any help will be appreciated as I feel as though I have been googling this for weeks now.

edited Nov 7 at 9:28

Chris G

5,8392821

asked Nov 7 at 9:24

Chunky Lova

1

The problem is that as soon as you select something from the 2nd dropdown, the change event gets triggered and the 2nd dropdown is emptied and rewritten. So while the choice is logged correctly, this resets the selected index to 0. A quick way to fix this is to replace $("#load_section3").change with $("#1st_incident").change
– Chris G
Nov 7 at 9:32

This worked, thank you !!
– Chunky Lova
Nov 7 at 9:35

add a comment |

up vote
-1
down vote

favorite

Logging the value to the console confirms that the value has changed but it just doesn't change visually.

I have also tried .html() in place of the .empty() and .append() but this also has the same issue.

$("#load_section3").change(function() {



  var first_incident = document.getElementById('1st_incident').value;

  var second_incident = document.getElementById('2nd_incident');



  console.log(second_incident.value);



  if (first_incident == 1) {



    //remove na and input options into next select box



    $('#2nd_incident').empty().end();



    $('#2nd_incident').append('<option > Please Select </option>' +

      '<option > something1 </option>' +

      '<option > something2 </option>' +

      '<option > something3 </option>' +

      '<option > something3 </option>');







  } else if (first_incident == 2) {



    $('#2nd_incident').empty().append('<option> Please Select </option>' +

      '<option> somethings1 </option>' +

      '<option> somethings2 </option>' +

      '<option> somethings3  </option>');



  } else {



    $('#2nd_incident').empty();

    $('#2nd_incident').append('<option> NA </option>');



  }



})

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

<div id="load_section3">

  <select class="inputs" id="1st_incident">

    <option> 1 </option>

    <option> 2 </option>

    <option> 3 </option>



  </select>



  <select class="inputs" id="2nd_incident">

    <option value="Test">NA</option>

  </select>

</div>

Any help will be appreciated as I feel as though I have been googling this for weeks now.

edited Nov 7 at 9:28

Chris G

5,8392821

asked Nov 7 at 9:24

Chunky Lova

Logging the value to the console confirms that the value has changed but it just doesn't change visually.

I have also tried .html() in place of the .empty() and .append() but this also has the same issue.

$("#load_section3").change(function() {



  var first_incident = document.getElementById('1st_incident').value;

  var second_incident = document.getElementById('2nd_incident');



  console.log(second_incident.value);



  if (first_incident == 1) {



    //remove na and input options into next select box



    $('#2nd_incident').empty().end();



    $('#2nd_incident').append('<option > Please Select </option>' +

      '<option > something1 </option>' +

      '<option > something2 </option>' +

      '<option > something3 </option>' +

      '<option > something3 </option>');







  } else if (first_incident == 2) {



    $('#2nd_incident').empty().append('<option> Please Select </option>' +

      '<option> somethings1 </option>' +

      '<option> somethings2 </option>' +

      '<option> somethings3  </option>');



  } else {



    $('#2nd_incident').empty();

    $('#2nd_incident').append('<option> NA </option>');



  }



})

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

<div id="load_section3">

  <select class="inputs" id="1st_incident">

    <option> 1 </option>

    <option> 2 </option>

    <option> 3 </option>



  </select>



  <select class="inputs" id="2nd_incident">

    <option value="Test">NA</option>

  </select>

</div>

Any help will be appreciated as I feel as though I have been googling this for weeks now.

$("#load_section3").change(function() {



  var first_incident = document.getElementById('1st_incident').value;

  var second_incident = document.getElementById('2nd_incident');



  console.log(second_incident.value);



  if (first_incident == 1) {



    //remove na and input options into next select box



    $('#2nd_incident').empty().end();



    $('#2nd_incident').append('<option > Please Select </option>' +

      '<option > something1 </option>' +

      '<option > something2 </option>' +

      '<option > something3 </option>' +

      '<option > something3 </option>');







  } else if (first_incident == 2) {



    $('#2nd_incident').empty().append('<option> Please Select </option>' +

      '<option> somethings1 </option>' +

      '<option> somethings2 </option>' +

      '<option> somethings3  </option>');



  } else {



    $('#2nd_incident').empty();

    $('#2nd_incident').append('<option> NA </option>');



  }



})

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

<div id="load_section3">

  <select class="inputs" id="1st_incident">

    <option> 1 </option>

    <option> 2 </option>

    <option> 3 </option>



  </select>



  <select class="inputs" id="2nd_incident">

    <option value="Test">NA</option>

  </select>

</div>

$("#load_section3").change(function() {



  var first_incident = document.getElementById('1st_incident').value;

  var second_incident = document.getElementById('2nd_incident');



  console.log(second_incident.value);



  if (first_incident == 1) {



    //remove na and input options into next select box



    $('#2nd_incident').empty().end();



    $('#2nd_incident').append('<option > Please Select </option>' +

      '<option > something1 </option>' +

      '<option > something2 </option>' +

      '<option > something3 </option>' +

      '<option > something3 </option>');







  } else if (first_incident == 2) {



    $('#2nd_incident').empty().append('<option> Please Select </option>' +

      '<option> somethings1 </option>' +

      '<option> somethings2 </option>' +

      '<option> somethings3  </option>');



  } else {



    $('#2nd_incident').empty();

    $('#2nd_incident').append('<option> NA </option>');



  }



})

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

<div id="load_section3">

  <select class="inputs" id="1st_incident">

    <option> 1 </option>

    <option> 2 </option>

    <option> 3 </option>



  </select>



  <select class="inputs" id="2nd_incident">

    <option value="Test">NA</option>

  </select>

</div>

javascript jquery html

edited Nov 7 at 9:28

Chris G

5,8392821

asked Nov 7 at 9:24

Chunky Lova

edited Nov 7 at 9:28

Chris G

5,8392821

asked Nov 7 at 9:24

Chunky Lova

edited Nov 7 at 9:28

Chris G

5,8392821

edited Nov 7 at 9:28

Chris G

5,8392821

edited Nov 7 at 9:28

Chris G

5,8392821

asked Nov 7 at 9:24

Chunky Lova

asked Nov 7 at 9:24

Chunky Lova

asked Nov 7 at 9:24

Chunky Lova

1

The problem is that as soon as you select something from the 2nd dropdown, the change event gets triggered and the 2nd dropdown is emptied and rewritten. So while the choice is logged correctly, this resets the selected index to 0. A quick way to fix this is to replace $("#load_section3").change with $("#1st_incident").change
– Chris G
Nov 7 at 9:32

This worked, thank you !!
– Chunky Lova
Nov 7 at 9:35

add a comment |

1

The problem is that as soon as you select something from the 2nd dropdown, the change event gets triggered and the 2nd dropdown is emptied and rewritten. So while the choice is logged correctly, this resets the selected index to 0. A quick way to fix this is to replace $("#load_section3").change with $("#1st_incident").change
– Chris G
Nov 7 at 9:32

This worked, thank you !!
– Chunky Lova
Nov 7 at 9:35

The problem is that as soon as you select something from the 2nd dropdown, the change event gets triggered and the 2nd dropdown is emptied and rewritten. So while the choice is logged correctly, this resets the selected index to 0. A quick way to fix this is to replace $("#load_section3").change with $("#1st_incident").change
– Chris G
Nov 7 at 9:32

This worked, thank you !!
– Chunky Lova
Nov 7 at 9:35

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

After going through your code i found that everytime you select values in selectbox it is checking for if conditions and updating the select boxes according to them. so here could be possible solution for your problem. You should only populate value to second selectbox on change event of first selectbox

<html>

<body>

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





<div id="load_section3">

  <select class="inputs" id="1st_incident">

    <option> 1 </option>

    <option> 2 </option>

    <option> 3 </option>



  </select>



  <select class="inputs" id="2nd_incident">

    <option value="Test">NA</option>

  </select>

</div>

<script>



  

   $("#1st_incident").change(function(){

      if (this.value == 1) {



    //remove na and input options into next select box



    $('#2nd_incident').empty().end();



    $('#2nd_incident').append('<option > Please Select </option>' +

      '<option > something1 </option>' +

      '<option > something2 </option>' +

      '<option > something3 </option>' +

      '<option > something3 </option>');







  } else if (this.value == 2) {



    $('#2nd_incident').empty().append('<option> Please Select </option>' +

      '<option> somethings1 </option>' +

      '<option> somethings2 </option>' +

      '<option> somethings3  </option>');



  } else {



    $('#2nd_incident').empty();

    $('#2nd_incident').append('<option> NA </option>');



  }

    });



</script>

<body>

<html>

answered Nov 7 at 10:04

Deepak Verma

37411

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',
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%2f53186582%2fselect-box-value-not-changing%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

<html>

<body>

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





<div id="load_section3">

  <select class="inputs" id="1st_incident">

    <option> 1 </option>

    <option> 2 </option>

    <option> 3 </option>



  </select>



  <select class="inputs" id="2nd_incident">

    <option value="Test">NA</option>

  </select>

</div>

<script>



  

   $("#1st_incident").change(function(){

      if (this.value == 1) {



    //remove na and input options into next select box



    $('#2nd_incident').empty().end();



    $('#2nd_incident').append('<option > Please Select </option>' +

      '<option > something1 </option>' +

      '<option > something2 </option>' +

      '<option > something3 </option>' +

      '<option > something3 </option>');







  } else if (this.value == 2) {



    $('#2nd_incident').empty().append('<option> Please Select </option>' +

      '<option> somethings1 </option>' +

      '<option> somethings2 </option>' +

      '<option> somethings3  </option>');



  } else {



    $('#2nd_incident').empty();

    $('#2nd_incident').append('<option> NA </option>');



  }

    });



</script>

<body>

<html>

answered Nov 7 at 10:04

Deepak Verma

37411

add a comment |

up vote
0
down vote

<html>

<body>

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





<div id="load_section3">

  <select class="inputs" id="1st_incident">

    <option> 1 </option>

    <option> 2 </option>

    <option> 3 </option>



  </select>



  <select class="inputs" id="2nd_incident">

    <option value="Test">NA</option>

  </select>

</div>

<script>



  

   $("#1st_incident").change(function(){

      if (this.value == 1) {



    //remove na and input options into next select box



    $('#2nd_incident').empty().end();



    $('#2nd_incident').append('<option > Please Select </option>' +

      '<option > something1 </option>' +

      '<option > something2 </option>' +

      '<option > something3 </option>' +

      '<option > something3 </option>');







  } else if (this.value == 2) {



    $('#2nd_incident').empty().append('<option> Please Select </option>' +

      '<option> somethings1 </option>' +

      '<option> somethings2 </option>' +

      '<option> somethings3  </option>');



  } else {



    $('#2nd_incident').empty();

    $('#2nd_incident').append('<option> NA </option>');



  }

    });



</script>

<body>

<html>

answered Nov 7 at 10:04

Deepak Verma

37411

add a comment |

up vote
0
down vote

<html>

<body>

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





<div id="load_section3">

  <select class="inputs" id="1st_incident">

    <option> 1 </option>

    <option> 2 </option>

    <option> 3 </option>



  </select>



  <select class="inputs" id="2nd_incident">

    <option value="Test">NA</option>

  </select>

</div>

<script>



  

   $("#1st_incident").change(function(){

      if (this.value == 1) {



    //remove na and input options into next select box



    $('#2nd_incident').empty().end();



    $('#2nd_incident').append('<option > Please Select </option>' +

      '<option > something1 </option>' +

      '<option > something2 </option>' +

      '<option > something3 </option>' +

      '<option > something3 </option>');







  } else if (this.value == 2) {



    $('#2nd_incident').empty().append('<option> Please Select </option>' +

      '<option> somethings1 </option>' +

      '<option> somethings2 </option>' +

      '<option> somethings3  </option>');



  } else {



    $('#2nd_incident').empty();

    $('#2nd_incident').append('<option> NA </option>');



  }

    });



</script>

<body>

<html>

answered Nov 7 at 10:04

Deepak Verma

37411

<html>

<body>

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





<div id="load_section3">

  <select class="inputs" id="1st_incident">

    <option> 1 </option>

    <option> 2 </option>

    <option> 3 </option>



  </select>



  <select class="inputs" id="2nd_incident">

    <option value="Test">NA</option>

  </select>

</div>

<script>



  

   $("#1st_incident").change(function(){

      if (this.value == 1) {



    //remove na and input options into next select box



    $('#2nd_incident').empty().end();



    $('#2nd_incident').append('<option > Please Select </option>' +

      '<option > something1 </option>' +

      '<option > something2 </option>' +

      '<option > something3 </option>' +

      '<option > something3 </option>');







  } else if (this.value == 2) {



    $('#2nd_incident').empty().append('<option> Please Select </option>' +

      '<option> somethings1 </option>' +

      '<option> somethings2 </option>' +

      '<option> somethings3  </option>');



  } else {



    $('#2nd_incident').empty();

    $('#2nd_incident').append('<option> NA </option>');



  }

    });



</script>

<body>

<html>

<html>

<body>

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





<div id="load_section3">

  <select class="inputs" id="1st_incident">

    <option> 1 </option>

    <option> 2 </option>

    <option> 3 </option>



  </select>



  <select class="inputs" id="2nd_incident">

    <option value="Test">NA</option>

  </select>

</div>

<script>



  

   $("#1st_incident").change(function(){

      if (this.value == 1) {



    //remove na and input options into next select box



    $('#2nd_incident').empty().end();



    $('#2nd_incident').append('<option > Please Select </option>' +

      '<option > something1 </option>' +

      '<option > something2 </option>' +

      '<option > something3 </option>' +

      '<option > something3 </option>');







  } else if (this.value == 2) {



    $('#2nd_incident').empty().append('<option> Please Select </option>' +

      '<option> somethings1 </option>' +

      '<option> somethings2 </option>' +

      '<option> somethings3  </option>');



  } else {



    $('#2nd_incident').empty();

    $('#2nd_incident').append('<option> NA </option>');



  }

    });



</script>

<body>

<html>

<html>

<body>

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





<div id="load_section3">

  <select class="inputs" id="1st_incident">

    <option> 1 </option>

    <option> 2 </option>

    <option> 3 </option>



  </select>



  <select class="inputs" id="2nd_incident">

    <option value="Test">NA</option>

  </select>

</div>

<script>



  

   $("#1st_incident").change(function(){

      if (this.value == 1) {



    //remove na and input options into next select box



    $('#2nd_incident').empty().end();



    $('#2nd_incident').append('<option > Please Select </option>' +

      '<option > something1 </option>' +

      '<option > something2 </option>' +

      '<option > something3 </option>' +

      '<option > something3 </option>');







  } else if (this.value == 2) {



    $('#2nd_incident').empty().append('<option> Please Select </option>' +

      '<option> somethings1 </option>' +

      '<option> somethings2 </option>' +

      '<option> somethings3  </option>');



  } else {



    $('#2nd_incident').empty();

    $('#2nd_incident').append('<option> NA </option>');



  }

    });



</script>

<body>

<html>

answered Nov 7 at 10:04

Deepak Verma

37411

answered Nov 7 at 10:04

Deepak Verma

37411

answered Nov 7 at 10:04

Deepak Verma

37411

answered Nov 7 at 10:04

Deepak Verma

37411

add a comment |

draft saved

draft discarded

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

搜尋此網誌

Wsrtjtyk