Swap a select text with javascript?

Swap a select text with javascript? - javascript

I have a example code here:
function swap() {
var sel1 = $("#se1 option:selected").text();
var sel2 = $("#se2 option:selected").text();;
console.log(sel1, sel2)
$("#se1").val(sel2);
$("#se2").val(sel1);
}
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
I want to swap se1 and se2 . Here is my code i tried:
function swap() {
var sel1 = $("#se1 option:selected").text();
var sel2 = $("#se2 option:selected").text();;
console.log(sel1, sel2)
$("#se1").val(sel2);
$("#se2").val(sel1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
It's work but it require Jquery 1.2.3 but i want to use Jquery 2.1.3. If i change script url to "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" but it isn't work
Thanks for help!

You shouldn't be swapping the values or the text of the two selected items in the lists. You just need to swap which item is selected in each list. Once that is done, that option will have whatever value the list has set up for it.
The version of JQuery you use here doesn't matter since what you are doing requires JQuery operations that have been in JQuery since the beginning.
var sel1 = $("#se1");
var sel2 = $("#se2");
function swap() {
let selection1 = sel1[0].selectedIndex; // Store the first list's selection
sel1[0].selectedIndex = sel2[0].selectedIndex;
sel2[0].selectedIndex = selection1;
// Test
console.log(sel1.val(), sel2.val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>

Related

How to print the selected value of only one option from html drop down list menu

Hello i have this drop down list menu and i want to make a script that when i select only the last option the labels change in html. This is my code i have done until now:
<select id='type' name='type' class="form-control" onchange="loadText(this)">
<option value="S">S</option>
<option value="B">B</option>
<option value="F">F</option>
</select>
<script>
function loadText(select) {
alert(select.options[select.valueOf(2)].text);
}
</script>
I tried to get the value of the selected option but it wont work, before i had it
select.selectedIndex
but i want this function to work only for the last value not for all 3

<select id='type' name='type' class="form-control" onchange="loadText(this)">
<option value="S">S</option>
<option value="B">B</option>
<option value="F">F</option>
</select>
<script>
function loadText(select) {
var select = document.getElementById('type');
var lastValue = select.options[select.options.length - 1].value;
var selectedValue = select.options[select.selectedIndex].text;
if (lastValue === selectedValue) {
alert(selectedValue);
}
}
</script>

How to select specific <option> tags in jQuery to transform into a Javascript Object

I want to get the information below the first <option> tag, I want to use jQuery/Cheerio to extract the information and transform the end result into a dictionary. It would ideally look like this
const info = {
'5.5':12773,
'6':12774,
}
And it goes on till the end.
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>

Well, if you want to do all of this in jQuery, you can simply get all of the options of a select element with the jQuery selector ($('#attributesize-size_uswomen option')) and then perform a for loop ($.each) over it and fill your object easily.
So your final code should be something like this:
var opts = $('#attributesize-size_uswomen option:not(:first)');
var info = {};
$.each(opts, function(index, opt) {
info[$(opt).text()] = parseInt($(opt).val())
});
console.log(info);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
NOTE: Since the opt itself in the loop will be a regular object to use the jQuery functions over it you need to make a jQuery object with $() operand otherwise you can use it as regular NODE object and get its properties with javascript built-in properties like text, textContent or value.
UPDATE
Since you receive an error in the implementation with cheerio which does not support :first pseudo-selector, so you can select all of the options then exclude the first one in the object creation.
var opts = $('#attributesize-size_uswomen option');
var info = {};
$.each(opts, function(index, opt) {
if (index != 0)
info[$(opt).text()] = parseInt($(opt).val())
});
console.log(info);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
Or if you want to keep up with the supported Cheerio approach you use this one:
var info = {};
$('#attributesize-size_uswomen').children().slice(1).each(function() {
info[$(this).text()] = parseInt($(this).val())
});
console.log(info);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>

Achieved using $("select option:not(:first)").each
CodePen

Populated Select with html + JS

I have this Fiddle : https://jsfiddle.net/Ardee12/tL643rjq/3/
My problem is, I always get the same options at the third select from second select (vice versa), after I select an option from the first one. I need to stick for their own option (second and third select), but still have the populated function from their "rel" attribute. Can anyone please help me?
$(document).ready(function () {
$(".mainSelect").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('.kidSelect option').clone());
}
var rel = this.options[this.selectedIndex].getAttribute('rel');
var options = $(this).data('options').filter('[rel=' + rel + ']');
$('.kidSelect').html(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>

You need to treat each of the kidSelect individually. Loop through each of them at the beginning and store a clone of their own options in each instance.
Then when you change main select, filter each set separately
// store a clone of each kidSelect options on page load
$('.kidSelect').each(function() {
$(this).data('options', $(this).children().clone());
});
$(".mainSelect").change(function() {
var rel = this.options[this.selectedIndex].getAttribute('rel');
// filter each kids options and set in place
$('.kidSelect').html(function() {
return $(this).data('options').filter('[rel=' + rel + ']').clone();
});
// trigger the change on page load also to do initial filtering
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>

I'm not entirely sure what you're trying to do but here is a guess.
I think you only want to effect the second select with the changes. For that you need to adjust your selector. It currently selects both selects.
$(document).ready(function () {
$(".mainSelect").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('.js-kidSelect option').clone());
}
var rel = this.options[this.selectedIndex].getAttribute('rel');
var options = $(this).data('options').filter('[rel=' + rel + ']');
$('.js-kidSelect').html(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect js-kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>

javascript - Hide Options from Multiple Selection Box when an option from another select is selected

I need your help. So what I want to do is when a user select an option from one select, automatically hide an option from another multiple select.
Example:
if a user choose Car from select A, I want the car option from the select B to be automatically removed or hidden.
select A:
<select name="my_option_one" required id="id_my_option_one">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
Select B:
<select name="my_option_two" id="id_my_option_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
This is what I have tried but none of it worked.
$(document).ready(function() {
$("#id_my_option_one").change(function() {
if ($(this).val() === 'C') {
$("#id_my_option_two option[value='C']").options[0].remove();
$('select[name=my_option_two] option:eq(1)').hide();
$("#id_my_option_two option[value=" + 'C' + "]").hide();
$("#id_my_option_two option[value='C']").attr('disabled','disabled').hide();
}
});
});

function my_optionsChange() {
$("#id_my_options_two option").show(); //.css("display", "block");
$("#id_my_options_two option[value='" + $("#id_my_options").val() + "']").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="my_options" required id="id_my_options" onchange="my_optionsChange()">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>

I made an example which is longer because it's split into parts so you understand better what is going on.
I tried to name the variables so that it's clear what they are, but if you have any questions, please ask in the comments.
Let me know if this works for you.
const firstSelect = $('#id_my_options')
const secondSelect = $('#id_my_options_two')
firstSelect.on('change',function() {
const selected = $(this).find('option:selected');
const selectedValue = selected.val()
const secondOptions = secondSelect.children();
secondOptions.each(function() {
const secondValue = $(this).val()
secondValue === selectedValue ? $(this).hide() : $(this).show()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="my_options" required id="id_my_options">
<option value="Choose" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>

<select name="my_options" id="firstblock" onchange="disable(2,this.value);">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options" id="secondblock" onchange="disable(1,this.value);">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<script>
function disable(needtoblock,val){
console.log(needtoblock+" "+val);
if(val != ""){
if(needtoblock == 1){
$("#firstblock option[value='"+val+"']").prop('disabled', true);
}else if(needtoblock == 2){
$("#secondblock option[value='"+val+"']").prop('disabled', true);
}else{
}
}else{
$("#secondblock option").prop('disabled', false);
$("#firstblock option").prop('disabled', false);
}
}
</script>
This is how code could look, definetly you need to update and make it suitable for you.

I know, this is a bit late, but maybe it is of interest to someone out there. I understood the demand of OP so, that the hiding of options was to be done in any direction, or potentially spanning over multiple selector boxes. The following script will do exactly that: if you select an option in one selector it will go through the other selectors of the defined group $grp (by doing $grp.not(this).each((i,trg)=> ...)) and will hide/show all options there, depending of whether thay have been selected elsewhere already.
The $(to).toggle(...) method sets the visibility of each option (to) within trg, based on the existence of selected options with the same value in the sibling selectors of trg (again, limited to the current group $grp).
Maybe the script is a little too condensed for easy reading but it shows how much you can achieve with very little code when you use the power of jQuery.
const $grp=$('select[id^=id_my_options]') // define the selector group
$grp.on('change',function(ev){ // bind the change event ...
$grp.not(this).each((i,trg)=> // work on each sibling-selector (trg) of clicked
// selector (this), but only within jquery
// selection $grp
$('option[value!=""]',trg).each((j,to)=> // for all options of sibling-selectors of
// trg (within jquery selection $grp):
$(to).toggle($grp.not(trg).find('option[value='+to.value+']:selected').length==0))
// toggle the visibiltiy of that option
)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="my_options" required id="id_my_options">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car2</option>
<option value="H">House2</option>
<option value="A">Airplane2</option>
</select>
<select name="my_options_three" id="id_my_options_three" multiple="multiple">
<option value="O">yet another option</option>
<option value="C">Car3</option>
<option value="H">House3</option>
<option value="A">Airplane3</option>
</select>
<br><br>
<select name="my_options_four" id="id_your_options_four" multiple="multiple">
<option value="O">and some unrelated options</option>
<option value="C">Car3</option>
<option value="H">House3</option>
<option value="A">Airplane3</option>
</select>

How to get the values and text of all the options of select element

I have a select element with a huge list of options (more than 2000).
I'd like to get the values and name of each option, one by line.
<select name='county_city' id='county_city'>
<OPTION value="51421">City one</OPTION>
<OPTION value="51422">City two</OPTION>
<OPTION value="51423">City three</OPTION>
<OPTION value="51424">City four</OPTION>
</select>
What I'd like is,
51421 = City one
51422 = City two
51423 = City three
51424 = City four
One option per line..
Thanks.

First, you need to iterate through the options array, and collect the values & text into a data array, then you can do whatever you feel like with it, for instance print it to the page like so:
var data = [];
$('#county_city option').each(function(){
var current = $(this);
data.push({
value: current.val(),
text: current.html()
})
});
$.each(data, function(){
console.log(this);
$('#result').append(this.value + ': ' + this.text)
.append('<br />');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='county_city' id='county_city'>
<OPTION value="51421">City one</OPTION>
<OPTION value="51422">City two</OPTION>
<OPTION value="51423">City three</OPTION>
<OPTION value="51424">City four</OPTION>
</select>
<div id="result"></div>

use the following code :-
HTML
<select name='county_city' id='county_city'>
<OPTION value="51421">City one</OPTION>
<OPTION value="51422">City two</OPTION>
<OPTION value="51423">City three</OPTION>
<OPTION value="51424">City four</OPTION>
</select>
JQuery
$(document).ready(function() {
$("#county_city OPTION").each(function(index){
alert(this.value);
alert(this.text);
});
});

Develop Reference

JavaScript is the programming language of the Web.

Swap a select text with javascript? - javascript

Related

How to print the selected value of only one option from html drop down list menu

How to select specific <option> tags in jQuery to transform into a Javascript Object

Populated Select with html + JS

javascript - Hide Options from Multiple Selection Box when an option from another select is selected

How to get the values and text of all the options of select element

Categories

Resources