Javascript/jQuery: populate a select with options taken from another select

-2

I have these 2 <select>s:

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

I need a javascript/jquery script that when I select an option from select 1 it populates the second select with the options next to the one it was selected.

Example: I choose 10AM from select 1 and the scenario should become:

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

  <option>11AM</option>

  <option>12AM</option>

</select>

I tried with this script but doesn't work:

$(document).on('change', '.js-select-1', function(e) {

  e.preventDefault();



  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');



  var options = $('.js-select-1').find("option");



  //var optionsArr = options.slice();

  var optionsArr = $.extend(true, , options);



  optionsArr.slice(0, optionSelectedIndex + 1).remove();



  $('.js-select-2').html(optionsArr);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

It removes all the options from select 1 and populates the select 2 with all the initial options of select 1.
Where am I wrong?

edited Jan 19 at 0:07

Barmar

424k35248349

asked Jan 18 at 23:58

Fred K

7,63175571

3

StackOverflow is not a free coding service. SO expects you to try to solve your own problem first. Please update your question to show what you have already tried in a Minimal, Complete, and Verifiable example. For further information, please see How to Ask, and take the tour :)

– Barmar
Jan 19 at 0:00

1

Agreed with @Barmar - what have you tried? where are you stuck?

– Kevin Friedheim
Jan 19 at 0:00

@KevinFriedheim I added the javascript I'm working on in the first post

– Fred K
Jan 19 at 0:07

add a comment |

-2

I have these 2 <select>s:

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

I need a javascript/jquery script that when I select an option from select 1 it populates the second select with the options next to the one it was selected.

Example: I choose 10AM from select 1 and the scenario should become:

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

  <option>11AM</option>

  <option>12AM</option>

</select>

I tried with this script but doesn't work:

$(document).on('change', '.js-select-1', function(e) {

  e.preventDefault();



  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');



  var options = $('.js-select-1').find("option");



  //var optionsArr = options.slice();

  var optionsArr = $.extend(true, , options);



  optionsArr.slice(0, optionSelectedIndex + 1).remove();



  $('.js-select-2').html(optionsArr);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

It removes all the options from select 1 and populates the select 2 with all the initial options of select 1.
Where am I wrong?

edited Jan 19 at 0:07

Barmar

424k35248349

asked Jan 18 at 23:58

Fred K

7,63175571

3

StackOverflow is not a free coding service. SO expects you to try to solve your own problem first. Please update your question to show what you have already tried in a Minimal, Complete, and Verifiable example. For further information, please see How to Ask, and take the tour :)

– Barmar
Jan 19 at 0:00

1

Agreed with @Barmar - what have you tried? where are you stuck?

– Kevin Friedheim
Jan 19 at 0:00

@KevinFriedheim I added the javascript I'm working on in the first post

– Fred K
Jan 19 at 0:07

add a comment |

-2

I have these 2 <select>s:

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

I need a javascript/jquery script that when I select an option from select 1 it populates the second select with the options next to the one it was selected.

Example: I choose 10AM from select 1 and the scenario should become:

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

  <option>11AM</option>

  <option>12AM</option>

</select>

I tried with this script but doesn't work:

$(document).on('change', '.js-select-1', function(e) {

  e.preventDefault();



  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');



  var options = $('.js-select-1').find("option");



  //var optionsArr = options.slice();

  var optionsArr = $.extend(true, , options);



  optionsArr.slice(0, optionSelectedIndex + 1).remove();



  $('.js-select-2').html(optionsArr);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

It removes all the options from select 1 and populates the select 2 with all the initial options of select 1.
Where am I wrong?

edited Jan 19 at 0:07

Barmar

424k35248349

asked Jan 18 at 23:58

Fred K

7,63175571

I have these 2 <select>s:

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

I need a javascript/jquery script that when I select an option from select 1 it populates the second select with the options next to the one it was selected.

Example: I choose 10AM from select 1 and the scenario should become:

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

  <option>11AM</option>

  <option>12AM</option>

</select>

I tried with this script but doesn't work:

$(document).on('change', '.js-select-1', function(e) {

  e.preventDefault();



  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');



  var options = $('.js-select-1').find("option");



  //var optionsArr = options.slice();

  var optionsArr = $.extend(true, , options);



  optionsArr.slice(0, optionSelectedIndex + 1).remove();



  $('.js-select-2').html(optionsArr);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

It removes all the options from select 1 and populates the select 2 with all the initial options of select 1.
Where am I wrong?

$(document).on('change', '.js-select-1', function(e) {

  e.preventDefault();



  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');



  var options = $('.js-select-1').find("option");



  //var optionsArr = options.slice();

  var optionsArr = $.extend(true, , options);



  optionsArr.slice(0, optionSelectedIndex + 1).remove();



  $('.js-select-2').html(optionsArr);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

$(document).on('change', '.js-select-1', function(e) {

  e.preventDefault();



  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');



  var options = $('.js-select-1').find("option");



  //var optionsArr = options.slice();

  var optionsArr = $.extend(true, , options);



  optionsArr.slice(0, optionSelectedIndex + 1).remove();



  $('.js-select-2').html(optionsArr);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

javascript jquery html arrays select

edited Jan 19 at 0:07

Barmar

424k35248349

asked Jan 18 at 23:58

Fred K

7,63175571

edited Jan 19 at 0:07

Barmar

424k35248349

asked Jan 18 at 23:58

Fred K

7,63175571

edited Jan 19 at 0:07

Barmar

424k35248349

edited Jan 19 at 0:07

Barmar

424k35248349

edited Jan 19 at 0:07

Barmar

424k35248349

asked Jan 18 at 23:58

Fred K

7,63175571

asked Jan 18 at 23:58

Fred K

7,63175571

asked Jan 18 at 23:58

Fred K

7,63175571

3

StackOverflow is not a free coding service. SO expects you to try to solve your own problem first. Please update your question to show what you have already tried in a Minimal, Complete, and Verifiable example. For further information, please see How to Ask, and take the tour :)

– Barmar
Jan 19 at 0:00

1

Agreed with @Barmar - what have you tried? where are you stuck?

– Kevin Friedheim
Jan 19 at 0:00

@KevinFriedheim I added the javascript I'm working on in the first post

– Fred K
Jan 19 at 0:07

add a comment |

3

StackOverflow is not a free coding service. SO expects you to try to solve your own problem first. Please update your question to show what you have already tried in a Minimal, Complete, and Verifiable example. For further information, please see How to Ask, and take the tour :)

– Barmar
Jan 19 at 0:00

1

Agreed with @Barmar - what have you tried? where are you stuck?

– Kevin Friedheim
Jan 19 at 0:00

@KevinFriedheim I added the javascript I'm working on in the first post

– Fred K
Jan 19 at 0:07

StackOverflow is not a free coding service. SO expects you to try to solve your own problem first. Please update your question to show what you have already tried in a Minimal, Complete, and Verifiable example. For further information, please see How to Ask, and take the tour :)

– Barmar
Jan 19 at 0:00

Agreed with @Barmar - what have you tried? where are you stuck?

– Kevin Friedheim
Jan 19 at 0:00

@KevinFriedheim I added the javascript I'm working on in the first post

– Fred K
Jan 19 at 0:07

add a comment |

3 Answers
3

active

oldest

votes

Shorter version, using jQuery :gt() selector and .appendTo():

$('select.js-select-1').change(function(e) {

  var $options = $(`option:gt(${this.selectedIndex})`, this).clone();



  $options.appendTo(

    $('select.js-select-2')

      .find('> option:not(:first)')

      .remove()

      .end()

  );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

The reason we need to clone the filtered <option>s is that without this, those elements will be detached and appended onto the target element instead of actually copied over.

edited Jan 19 at 1:26

answered Jan 19 at 0:21

jom

1,481616

Updated to have the first option in the second select preserved.

– jom
Jan 19 at 1:19

add a comment |

You're moving the elements from one <select> to the other. If you want to leave them in the original menu, you need to clone them.

There's no need for the array, you can just iterate over the jQuery collection.

$(document).on('change', '.js-select-1', function(e) {

  e.preventDefault();



  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');



  var options = $('.js-select-1 option:gt(' + optionSelectedIndex + ')');

  $(".js-select-2").empty();

  options.each(function() {

    $(".js-select-2").append($(this).clone());

  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

answered Jan 19 at 0:20

Barmar

424k35248349

Awesome. Why not to clone the whole options variable (instead of cloning inside the loop) and then inject with .html()? Like the @jom's solution

– Fred K
Jan 19 at 0:37

I originally coded by answer using .html() rather than .clone(), but that didn't work. I changed it to .clone() and didn't realize I no longer needed the loop.

– Barmar
Jan 19 at 0:39

add a comment |

Here is an example that is a little more flexible.

$('select.js-select-1').change(function(e) {

  var i = $("option:selected", this).index();

  var opts = $("option:gt(" + i + ")", this).clone();

  $('.js-select-2 option:gt(0)').remove();

  $('.js-select-2').append(opts);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12PM</option>

  <option>01PM</option>

  <option>02PM</option>

  <option>03PM</option>

  <option>04PM</option>

  <option>05PM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

Anytime you change the Start Date, it will update the End Date.

Hope that helps.

edited Jan 19 at 0:48

answered Jan 19 at 0:46

Twisty

13.8k11534

In what your solution is better than the @jom's one?

– Fred K
Jan 19 at 0:47

@FredK largely the same. Just does not remove the first <option> element.

– Twisty
Jan 19 at 0:49

@FredK I updated mine to have the first option in the second select preserved, in case you need it.

– jom
Jan 19 at 1:20

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%2f54262885%2fjavascript-jquery-populate-a-select-with-options-taken-from-another-select%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Shorter version, using jQuery :gt() selector and .appendTo():

$('select.js-select-1').change(function(e) {

  var $options = $(`option:gt(${this.selectedIndex})`, this).clone();



  $options.appendTo(

    $('select.js-select-2')

      .find('> option:not(:first)')

      .remove()

      .end()

  );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

The reason we need to clone the filtered <option>s is that without this, those elements will be detached and appended onto the target element instead of actually copied over.

edited Jan 19 at 1:26

answered Jan 19 at 0:21

jom

1,481616

Updated to have the first option in the second select preserved.

– jom
Jan 19 at 1:19

add a comment |

Shorter version, using jQuery :gt() selector and .appendTo():

$('select.js-select-1').change(function(e) {

  var $options = $(`option:gt(${this.selectedIndex})`, this).clone();



  $options.appendTo(

    $('select.js-select-2')

      .find('> option:not(:first)')

      .remove()

      .end()

  );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

The reason we need to clone the filtered <option>s is that without this, those elements will be detached and appended onto the target element instead of actually copied over.

edited Jan 19 at 1:26

answered Jan 19 at 0:21

jom

1,481616

Updated to have the first option in the second select preserved.

– jom
Jan 19 at 1:19

add a comment |

Shorter version, using jQuery :gt() selector and .appendTo():

$('select.js-select-1').change(function(e) {

  var $options = $(`option:gt(${this.selectedIndex})`, this).clone();



  $options.appendTo(

    $('select.js-select-2')

      .find('> option:not(:first)')

      .remove()

      .end()

  );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

The reason we need to clone the filtered <option>s is that without this, those elements will be detached and appended onto the target element instead of actually copied over.

edited Jan 19 at 1:26

answered Jan 19 at 0:21

jom

1,481616

Shorter version, using jQuery :gt() selector and .appendTo():

$('select.js-select-1').change(function(e) {

  var $options = $(`option:gt(${this.selectedIndex})`, this).clone();



  $options.appendTo(

    $('select.js-select-2')

      .find('> option:not(:first)')

      .remove()

      .end()

  );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

The reason we need to clone the filtered <option>s is that without this, those elements will be detached and appended onto the target element instead of actually copied over.

$('select.js-select-1').change(function(e) {

  var $options = $(`option:gt(${this.selectedIndex})`, this).clone();



  $options.appendTo(

    $('select.js-select-2')

      .find('> option:not(:first)')

      .remove()

      .end()

  );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

$('select.js-select-1').change(function(e) {

  var $options = $(`option:gt(${this.selectedIndex})`, this).clone();



  $options.appendTo(

    $('select.js-select-2')

      .find('> option:not(:first)')

      .remove()

      .end()

  );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

edited Jan 19 at 1:26

answered Jan 19 at 0:21

jom

1,481616

edited Jan 19 at 1:26

answered Jan 19 at 0:21

jom

1,481616

answered Jan 19 at 0:21

jom

1,481616

answered Jan 19 at 0:21

jom

1,481616

Updated to have the first option in the second select preserved.

– jom
Jan 19 at 1:19

add a comment |

Updated to have the first option in the second select preserved.

– jom
Jan 19 at 1:19

Updated to have the first option in the second select preserved.

– jom
Jan 19 at 1:19

add a comment |

You're moving the elements from one <select> to the other. If you want to leave them in the original menu, you need to clone them.

There's no need for the array, you can just iterate over the jQuery collection.

$(document).on('change', '.js-select-1', function(e) {

  e.preventDefault();



  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');



  var options = $('.js-select-1 option:gt(' + optionSelectedIndex + ')');

  $(".js-select-2").empty();

  options.each(function() {

    $(".js-select-2").append($(this).clone());

  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

answered Jan 19 at 0:20

Barmar

424k35248349

Awesome. Why not to clone the whole options variable (instead of cloning inside the loop) and then inject with .html()? Like the @jom's solution

– Fred K
Jan 19 at 0:37

I originally coded by answer using .html() rather than .clone(), but that didn't work. I changed it to .clone() and didn't realize I no longer needed the loop.

– Barmar
Jan 19 at 0:39

add a comment |

You're moving the elements from one <select> to the other. If you want to leave them in the original menu, you need to clone them.

There's no need for the array, you can just iterate over the jQuery collection.

$(document).on('change', '.js-select-1', function(e) {

  e.preventDefault();



  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');



  var options = $('.js-select-1 option:gt(' + optionSelectedIndex + ')');

  $(".js-select-2").empty();

  options.each(function() {

    $(".js-select-2").append($(this).clone());

  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

answered Jan 19 at 0:20

Barmar

424k35248349

Awesome. Why not to clone the whole options variable (instead of cloning inside the loop) and then inject with .html()? Like the @jom's solution

– Fred K
Jan 19 at 0:37

I originally coded by answer using .html() rather than .clone(), but that didn't work. I changed it to .clone() and didn't realize I no longer needed the loop.

– Barmar
Jan 19 at 0:39

add a comment |

You're moving the elements from one <select> to the other. If you want to leave them in the original menu, you need to clone them.

There's no need for the array, you can just iterate over the jQuery collection.

$(document).on('change', '.js-select-1', function(e) {

  e.preventDefault();



  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');



  var options = $('.js-select-1 option:gt(' + optionSelectedIndex + ')');

  $(".js-select-2").empty();

  options.each(function() {

    $(".js-select-2").append($(this).clone());

  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

answered Jan 19 at 0:20

Barmar

424k35248349

You're moving the elements from one <select> to the other. If you want to leave them in the original menu, you need to clone them.

There's no need for the array, you can just iterate over the jQuery collection.

$(document).on('change', '.js-select-1', function(e) {

  e.preventDefault();



  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');



  var options = $('.js-select-1 option:gt(' + optionSelectedIndex + ')');

  $(".js-select-2").empty();

  options.each(function() {

    $(".js-select-2").append($(this).clone());

  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

$(document).on('change', '.js-select-1', function(e) {

  e.preventDefault();



  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');



  var options = $('.js-select-1 option:gt(' + optionSelectedIndex + ')');

  $(".js-select-2").empty();

  options.each(function() {

    $(".js-select-2").append($(this).clone());

  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

$(document).on('change', '.js-select-1', function(e) {

  e.preventDefault();



  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');



  var options = $('.js-select-1 option:gt(' + optionSelectedIndex + ')');

  $(".js-select-2").empty();

  options.each(function() {

    $(".js-select-2").append($(this).clone());

  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12AM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

answered Jan 19 at 0:20

Barmar

424k35248349

answered Jan 19 at 0:20

Barmar

424k35248349

answered Jan 19 at 0:20

Barmar

424k35248349

answered Jan 19 at 0:20

Barmar

424k35248349

Awesome. Why not to clone the whole options variable (instead of cloning inside the loop) and then inject with .html()? Like the @jom's solution

– Fred K
Jan 19 at 0:37

I originally coded by answer using .html() rather than .clone(), but that didn't work. I changed it to .clone() and didn't realize I no longer needed the loop.

– Barmar
Jan 19 at 0:39

add a comment |

Awesome. Why not to clone the whole options variable (instead of cloning inside the loop) and then inject with .html()? Like the @jom's solution

– Fred K
Jan 19 at 0:37

I originally coded by answer using .html() rather than .clone(), but that didn't work. I changed it to .clone() and didn't realize I no longer needed the loop.

– Barmar
Jan 19 at 0:39

Awesome. Why not to clone the whole options variable (instead of cloning inside the loop) and then inject with .html()? Like the @jom's solution

– Fred K
Jan 19 at 0:37

I originally coded by answer using .html() rather than .clone(), but that didn't work. I changed it to .clone() and didn't realize I no longer needed the loop.

– Barmar
Jan 19 at 0:39

add a comment |

Here is an example that is a little more flexible.

$('select.js-select-1').change(function(e) {

  var i = $("option:selected", this).index();

  var opts = $("option:gt(" + i + ")", this).clone();

  $('.js-select-2 option:gt(0)').remove();

  $('.js-select-2').append(opts);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12PM</option>

  <option>01PM</option>

  <option>02PM</option>

  <option>03PM</option>

  <option>04PM</option>

  <option>05PM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

Anytime you change the Start Date, it will update the End Date.

Hope that helps.

edited Jan 19 at 0:48

answered Jan 19 at 0:46

Twisty

13.8k11534

In what your solution is better than the @jom's one?

– Fred K
Jan 19 at 0:47

@FredK largely the same. Just does not remove the first <option> element.

– Twisty
Jan 19 at 0:49

@FredK I updated mine to have the first option in the second select preserved, in case you need it.

– jom
Jan 19 at 1:20

add a comment |

Here is an example that is a little more flexible.

$('select.js-select-1').change(function(e) {

  var i = $("option:selected", this).index();

  var opts = $("option:gt(" + i + ")", this).clone();

  $('.js-select-2 option:gt(0)').remove();

  $('.js-select-2').append(opts);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12PM</option>

  <option>01PM</option>

  <option>02PM</option>

  <option>03PM</option>

  <option>04PM</option>

  <option>05PM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

Anytime you change the Start Date, it will update the End Date.

Hope that helps.

edited Jan 19 at 0:48

answered Jan 19 at 0:46

Twisty

13.8k11534

In what your solution is better than the @jom's one?

– Fred K
Jan 19 at 0:47

@FredK largely the same. Just does not remove the first <option> element.

– Twisty
Jan 19 at 0:49

@FredK I updated mine to have the first option in the second select preserved, in case you need it.

– jom
Jan 19 at 1:20

add a comment |

Here is an example that is a little more flexible.

$('select.js-select-1').change(function(e) {

  var i = $("option:selected", this).index();

  var opts = $("option:gt(" + i + ")", this).clone();

  $('.js-select-2 option:gt(0)').remove();

  $('.js-select-2').append(opts);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12PM</option>

  <option>01PM</option>

  <option>02PM</option>

  <option>03PM</option>

  <option>04PM</option>

  <option>05PM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

Anytime you change the Start Date, it will update the End Date.

Hope that helps.

edited Jan 19 at 0:48

answered Jan 19 at 0:46

Twisty

13.8k11534

Here is an example that is a little more flexible.

$('select.js-select-1').change(function(e) {

  var i = $("option:selected", this).index();

  var opts = $("option:gt(" + i + ")", this).clone();

  $('.js-select-2 option:gt(0)').remove();

  $('.js-select-2').append(opts);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12PM</option>

  <option>01PM</option>

  <option>02PM</option>

  <option>03PM</option>

  <option>04PM</option>

  <option>05PM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

Anytime you change the Start Date, it will update the End Date.

Hope that helps.

$('select.js-select-1').change(function(e) {

  var i = $("option:selected", this).index();

  var opts = $("option:gt(" + i + ")", this).clone();

  $('.js-select-2 option:gt(0)').remove();

  $('.js-select-2').append(opts);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12PM</option>

  <option>01PM</option>

  <option>02PM</option>

  <option>03PM</option>

  <option>04PM</option>

  <option>05PM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

$('select.js-select-1').change(function(e) {

  var i = $("option:selected", this).index();

  var opts = $("option:gt(" + i + ")", this).clone();

  $('.js-select-2 option:gt(0)').remove();

  $('.js-select-2').append(opts);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select class="js-select-1">

  <option disabled>Start date</option>

  <option>08AM</option>

  <option>09AM</option>

  <option>10AM</option>

  <option>11AM</option>

  <option>12PM</option>

  <option>01PM</option>

  <option>02PM</option>

  <option>03PM</option>

  <option>04PM</option>

  <option>05PM</option>

</select>



<select class="js-select-2">

  <option disabled>End date</option>

</select>

edited Jan 19 at 0:48

answered Jan 19 at 0:46

Twisty

13.8k11534

edited Jan 19 at 0:48

answered Jan 19 at 0:46

Twisty

13.8k11534

answered Jan 19 at 0:46

Twisty

13.8k11534

answered Jan 19 at 0:46

Twisty

13.8k11534

In what your solution is better than the @jom's one?

– Fred K
Jan 19 at 0:47

@FredK largely the same. Just does not remove the first <option> element.

– Twisty
Jan 19 at 0:49

@FredK I updated mine to have the first option in the second select preserved, in case you need it.

– jom
Jan 19 at 1:20

add a comment |

In what your solution is better than the @jom's one?

– Fred K
Jan 19 at 0:47

@FredK largely the same. Just does not remove the first <option> element.

– Twisty
Jan 19 at 0:49

@FredK I updated mine to have the first option in the second select preserved, in case you need it.

– jom
Jan 19 at 1:20

In what your solution is better than the @jom's one?

– Fred K
Jan 19 at 0:47

@FredK largely the same. Just does not remove the first <option> element.

– Twisty
Jan 19 at 0:49

@FredK I updated mine to have the first option in the second select preserved, in case you need it.

– jom
Jan 19 at 1:20

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

搜尋此網誌

Brtdku