jQuery move select option to the second position

jQuery move select option to the second position - javascript

I have select :
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
...
<option value="37">Switzerland</option>
...
</select>
How can I move option with text Switzerland to the second position in the list ? Result will be :
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="37">Switzerland</option>
<option value="40">Afghanistan</option>
...
</select>

You can use jquery after() to place it after the first-child in the select - see demo below:
$('select[name=country_id] option:first-child').after($('select[name=country_id] option[value=37]'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="37">Switzerland</option>
</select>

You can get all of the <option> elements, and then filter them by the value attribute. Finally, once you have the correct element selected (in this case for Switzerland), you can use insertBefore() to move its location in the DOM.
Example:
var $opts = $('.selCommon').children();
$opts.filter('[value="37"]').insertBefore( $opts.eq(1) )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="40">United Kingdom</option>
<option value="40">USA</option>
<option value="37">Switzerland</option>
</select>

You can also try this:
$(document).ready(function(){
var options = $('.selCommon option' );
var SwitzerlandIndex=0;
var cnt=0;
$(options).each(function(){
if($(this).text() == "Switzerland"){
SwitzerlandIndex=cnt;
}
cnt++;
});
$(options[SwitzerlandIndex]).insertAfter($(options[0]));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="41">Test</option>
<option value="37">Switzerland</option>
<option value="38">Test 2</option>
</select>

You can sort on the value
$('.selCommon option').sort((a, b) => a.value - b.value).appendTo('.selCommon');
$('.selCommon').val("")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="57">Sweden</option>
<option value="37">Switzerland</option>
<option value="12">USA</option>
</select>

Related

How can I get the value select name

I´m now beginning with programming and I need to know what text would be the value of this code. The JS code would be an "on click" event from this unfoldable list. Thanks you in advance!!
<select name="select1" data-dojo-type="dijit/form/Select">
<option value="Artesania">Artesania</option>
<option value="Banco" selected="selected">Banco</option>
<option value="Bar">Bar</option>
<option value="Bodega">Bodega</option>
<option value="Boutique">Boutique</option>
<option value="Discoteca">Discoteca</option>

var selectbox = document.getElementById('select');
selectbox.addEventListener('change', function(){
console.log(this.value);
//do whatever you want with the value
});
<select name="select1" data-dojo-type="dijit/form/Select" id='select'>
<option value="Artesania">Artesania</option>
<option value="Banco" selected="selected">Banco</option>
<option value="Bar">Bar</option>
<option value="Bodega">Bodega</option>
<option value="Boutique">Boutique</option>
<option value="Discoteca">Discoteca</option>
</select>

JS - hide options based on value attribute

I need to hide all options when the value attribute is > 23
<select id="category_ids" class="cat-search-pb" multiple >
<option value="20">Condo for Sale</option>
<option value="24"> - Jomtien</option>
<option value="25"> - Bang Saray</option>
<option value="21">Condo for Rent</option>
<option value="22">House for Sale</option>
<option value="23">House for Rent</option>
<option value="14">Land</option>
<option value="15">Commercial</option>
<option value="18">New Condo Projects</option>
<option value="19">New House Projects</option>
</select>
But this code does not work:
$(document).ready(function () {
$(".cat-search-pb option[value>23]").closest('option').hide();
});
Thanks for your ideas!

You can use jquery filter() on the options that have the value attribute - see demo below:
$(document).ready(function() {
$(".cat-search-pb option[value]").filter(function() {
return +$(this).val() > 23;
}).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category_ids" class="cat-search-pb" multiple>
<option value="20">Condo for Sale</option>
<option value="24"> - Jomtien</option>
<option value="25"> - Bang Saray</option>
<option value="21">Condo for Rent</option>
<option value="22">House for Sale</option>
<option value="23">House for Rent</option>
<option value="14">Land</option>
<option value="15">Commercial</option>
<option value="18">New Condo Projects</option>
<option value="19">New House Projects</option>
</select>

Try this, using .filter(). You must convert the value attribute to number using Number() or +$(this)
$(function()
{
$(".cat-search-pb option").filter(function()
{
return +$(this).val() > 23;
}).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category_ids" class="cat-search-pb" multiple>
<option value="20">Condo for Sale</option>
<option value="24"> - Jomtien</option>
<option value="25"> - Bang Saray</option>
<option value="21">Condo for Rent</option>
<option value="22">House for Sale</option>
<option value="23">House for Rent</option>
<option value="14">Land</option>
<option value="15">Commercial</option>
<option value="18">New Condo Projects</option>
<option value="19">New House Projects</option>
</select>

I'm assuming you would like to listen for changes to the selection, showing them all initially. In that case you can use the $.change() listener
$( ".cat-search-pb" ).change(function(e) {
if (e.target.value > 23) {
$(e.target).hide()
}
});
https://jsfiddle.net/qee4qccv/
https://api.jquery.com/change/

Disable 3th, 4th dropdown list if 1st or 2nr are selected

I have this issue: In my form there are 4 dropdownlist and when the 1st (category1) or 2nd (software1) dropdown list is selected, the 3th (category2) and 4th (software2) must be disabled.
For this issue I find this script at disable-second-dropdown-if-the-first-is-not-selected but I do not trust to modify this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<script type="text/javascript">
var setEnabled = function(e) {
var name = this.name.replace(/1/, '2'); //get name for second drop down
$('select[name=' + name + ']')
.prop('disabled', 0 === this.selectedIndex) // disable if selected option is first one
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
</script>
How to modify this?
Thanks

I think the main thing you want is to flip === for !==
However, to get this working on a matrix, where both top inputs trigger enabling/disabling of both bottom inputs, you'll need to test both on change of either.
var setEnabled = function(e) {
var selected = $('select[name=cat1]').prop('selectedIndex') > 0 || $('select[name=soft1]').prop('selectedIndex') > 0;
$('select[name=cat2], select[name=soft2]').prop('disabled', selected); // disable if selected option is first one
if (selected) {
$('select[name=cat2], select[name=soft2]').prop('selectedIndex', 0)
}
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>

In JQuery, how do I copy a subset of select options from one select menu to another?

I'm using JQuery 1.11.1. I have two select menu elements, one containing options like
<select id="select1">
<option value="A">option A</option>
<option value="B">option B</option>
...
<option value="">=============</option>
<option value="AA">option AA</option>
<option value="BB">option BB</option>
...
</select>
How do I copy the options up to and including the option with the
"=============" text to the second select menu (let's say the second select menu has id='select2').
Thanks, - Dave

var option, count = -1;
while ((option = $('#select1 option')[++count]).value != "")
{
$(option).clone().appendTo('#select2');
}
$($('#select1 option')[count]).clone().appendTo('#select2'); //for the '=====' one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="A">option A</option>
<option value="B">option B</option>
<option value="">=============</option>
<option value="AA">option AA</option>
<option value="BB">option BB</option>
</select>
<select id="select2">
</select>

First solution:
You can do it this way:
var emptyOption = $("#select1 option").filter(function() {
return $.trim( $(this).val() ) == '';
});
var $options = emptyOption.prevAll().addBack().clone();
$('#select2').append($options);
JSFiddle: http://jsfiddle.net/inanda/uosvokdr/2/
Second solution:
If you can add a class to the options you want to copy, you can do it the following way.
HTML
<select id="select1">
<option value="A" class="copy">option A</option>
<option value="B" class="copy">option B</option>
<option value="" class="copy">=============</option>
<option value="AA">option AA</option>
<option value="BB">option BB</option>
</select>
<select id="select2">
</select>
Javascript:
var $options = $("#select1 > option.copy").clone();
$('#select2').append($options);
Working JsFiddle: http://jsfiddle.net/inanda/m2qd177u/1/

How to select selected value from multiple option using javascript

I have multiple select topion.
And I need to show the selected values.with the data of '2,4,5;
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2">test Value2</option>
<option value="3">test Value3</option>
<option value="4">test Value4</option>
<option value="5">test Value5</option>
<option value="6">test Value6</option>
</select>
Can I use this code to get what I need.
<script type="javascript">
$(document).ready(function() {
var val_to_select = '2,4,5';
$( '#testID' ).val( val_to_select );
)};
</script>
I need output to be like this
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2" selected>test Value2</option>
<option value="3">test Value3</option>
<option value="4" selected>test Value4</option>
<option value="5" selected>test Value5</option>
<option value="6">test Value6</option>
</select>

you can pass the value in an array like this
$("#testID").val([1,2,3]);
JsFiddle

You can use this:
var data="1,2,4";
//Make an array
var dataarray=data.split(",");
// Set the value
$("#testID").val(dataarray);
// Then refresh
$("#testID").multiselect("refresh");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2">test Value2</option>
<option value="3">test Value3</option>
<option value="4">test Value4</option>
<option value="5">test Value5</option>
<option value="6">test Value6</option>
</select>
Also your code is not javascript but jquery.

Develop Reference

JavaScript is the programming language of the Web.

jQuery move select option to the second position - javascript

Related

How can I get the value select name

JS - hide options based on value attribute

Disable 3th, 4th dropdown list if 1st or 2nr are selected

In JQuery, how do I copy a subset of select options from one select menu to another?

How to select selected value from multiple option using javascript

Categories

Resources