Error set selected value in selectbox after use append

Error set selected value in selectbox after use append - javascript

I have a dropbox
<select name="product">
<option value="">Select a product</option>
<option value="1">iPhone</option>
</select>
And my script
$('select[name=product]').append("<option value='2'>Samsung</option>").prop('selected', true);
This is my result
<select name="product">
<option value="">Select a product</option>
<option value="1">iPhone</option>
<option value="2">Samsung</option>
</select>
How to fix it
<select name="product">
<option value="">Select a product</option>
<option value="1">iPhone</option>
<option value="2" selected="selected">Samsung</option>
</select>

Easier by adding selected attribute directly :
$('select[name=product]').append("<option value='2' selected>Samsung</option>");
DEMO

jQuery chaining returns the initial select object, but not an appended option.
Your code does the same as:
var o = $('select[name=product]');
o.append('<option/>');
o.prop('selected', true); // not on option, but on select
Change your syntax to the following:
$("<option value='2'>Samsung</option>")
.appendTo('select[name=product]')
.prop('selected', true);

You need to change the selected property of the option.
Try?
$('select[name=product]').append("<option value='2' selected=SELECTED>Samsung</option>");

It's easy. You can do that like this.
$('select[name=product]').append("<option value='2'>Samsung</option>");
$('select[name=product] option:last').attr('selected', 'selected');

Related

How to map only the checked options of a select element

I need to map to an array the selected options inside select element (multiple selection is enable).
Here is the html:
<select id="listado" size="5" multiple>
<option value="Leer" id="aficion-leer">Leer</option>
<option value="Programar" id="aficion-programar">Programar</option>
<option value="Cine" id="aficion-cine">Cine</option>
<option value="Deporte" id="aficion-deporte">Deporte</option>
</select>
I tried this:
Array.from(document.querySelector("#listado")).map(elemento => elemento.value); which returns every option. According to this answer, adding option:checked to the query param should do the trick, but I get an empty list.
Any idea on what the reason might be?

You can use document.querySelectorAll and only select options that are checked, then map them.
let options=[...document.querySelectorAll("#listado option:checked")].map(elemento => elemento.value)
console.log(options)
<select id="listado" size="5" multiple>
<option value="Leer" id="aficion-leer">Leer</option>
<option value="Programar" id="aficion-programar" selected>Programar</option>
<option value="Cine" id="aficion-cine">Cine</option>
<option value="Deporte" id="aficion-deporte" selected>Deporte</option>
</select>

Have you tried this?
console.log(
Array.from(document.querySelector("#listado").childNodes).filter(elemento => elemento.selected).map(elemento => elemento.value) // this line
);
<select id="listado" size="5" multiple>
<option value="Leer" id="aficion-leer">Leer</option>
<option value="Programar" id="aficion-programar" selected>Programar</option> <!-- selected for demo -->
<option value="Cine" id="aficion-cine">Cine</option>
<option value="Deporte" id="aficion-deporte">Deporte</option>
</select>

How to avoid onclick to work again after selecting option in html-select?

I have problem in the following code;
function check(x){
//do staff here
}
<select onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
<select onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
When i click on the select tag, my function works but after selecting an option, the function works again.
But i want the function to work only when i click on the select tag, not when selecting one of the options tag again.
I searched but couldn't find any solution for this. How can i avoid this to happen?
Thanks in advance.

Use onchange instead of onclick.
https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/change_event
<select onchange="check(this.value)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>

Set a flag on first execution and check the flag.
var executed = {};
function check(e) {
var name = e.name;
if (!executed[e.name]) {
executed[e.name] = true;
console.log("executed", e.name);
}
}
<select name="select1" onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
<select name="select2" onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>

If you're using jQuery you can use the one() function as it is documented here
$( "select" ).one('change', function(){
//do staff here
}
<select class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
<select class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>

Let’s check the event.stopPropagation() method.

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>

Change value of select list with value of another select list jquery

How can I change the value of a select list with the value of another select list
<select class="main-filter" id="Test1" name="Test1"><option value="">Select Option</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Need to replace #ReplaceThisText# with value selected from above select box
<select id="selectfilter" name="selectfilter" class="form-control main-filter">
<option value="">Sort Products</option>
<option value="/?id=na&selectfilter=hl&Type=#ReplaceThisText#">Chnage Value</option>
</select>
I have tried code from this link Change the Text of a Option with jQuery
and jquery how to find and replace a selected option that has a certain value
but cannot seem to get it to work
My code is
$('#Test1').change(function () {
sessionStorage.setItem("Test1", $(this).val());
$('.main-filter :selected:contains("#ReplaceThisText#")').val($(this).val());
location.href = $(this).val();
});

:contains will look at the .text() value - but your #ReplaceThisText# is not in the .text() value - so you'll need to use .filter() to find it instead:
Adding some console.logs so you can see what's happening and updated the .val(newval) code to make the replacement.
$('#Test1').change(function() {
var newval = $(this).val();
console.log("before", $(".main-filter :contains('Change Value')").val())
var opt = $('.main-filter option').filter(function() {
return $(this).val().indexOf("#ReplaceThisText#") >= 0;
});
console.log("opt length", opt.length);
opt.each(function() {
$(this).val($(this).val().replace(/#ReplaceThisText#/gi, newval));
});
console.log("after", $(".main-filter :contains('Change Value')").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="main-filter" id="Test1" name="Test1">
<option value="">Select Option</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select id="selectfilter" name="selectfilter" class="form-control main-filter">
<option value="">Sort Products</option>
<option value="/?id=na&selectfilter=hl&Type=#ReplaceThisText#">Change Value</option>
</select>

Enable/disable drop down list based on another drop down list

I have 2 drop down list
<select id="servergroup" multiple="multiple">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select id="servername" multiple="multiple">
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
I want that the second drop down list should get enabled only if we choose a value in the first drop down list. It should again get disabled if we deselect the value from the first drop down list.
May I know how can this be achieved using jQuery?

You can use the disabled attribute and using JavaScript, you can set it as false or true
function check(){
if(document.getElementById('servergroup').value!='')
document.getElementById('servername').disabled=false;
else
document.getElementById('servername').disabled=true;
}
<select onchange="check()" id="servergroup" multiple="multiple">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select disabled id="servername" multiple="multiple">
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>

$('#bonusVoucher').prop('disabled',false);
jQuery('#bonusVoucher').selectpicker('refresh');
Use selectpicker like this and the most IMPORTANT part is this:
Note: Place your bootsrap selectpicker script after jquery script.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>

jQuery solution.
function change() {
if ($('#servergroup option:selected').length) {
$('#servername').attr('disabled', false);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="servergroup" multiple="multiple" onchange='change()'>
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select id="servername" multiple="multiple" disabled>
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>

First add
<option value="-1"> -Select Server Group- </option>
and
<option value="-1"> -Select Server Name- </option>
to Your Dropdown boxes respectively.
We can achieve requested actions using JQuery as Follows:
$(document).ready(function ()
{
//making serverName Dropdown box disabled by default.
$('#servername').prop('disabled', true);
$('#servergroup').change(function ()
{
if($(this).val == "-1")
{
$('#servername').val = "-1";
$('#servername').prop('disabled', true);
}
else
{
$('#servername').prop('disabled', false);
}
});
});

Develop Reference

JavaScript is the programming language of the Web.

Error set selected value in selectbox after use append - javascript

Easier by adding selected attribute directly : $('select[name=product]').append("<option value='2' selected>Samsung</option>"); DEMO

You need to change the selected property of the option. Try? $('select[name=product]').append("<option value='2' selected=SELECTED>Samsung</option>");

It's easy. You can do that like this. $('select[name=product]').append("<option value='2'>Samsung</option>"); $('select[name=product] option:last').attr('selected', 'selected');

Related

How to map only the checked options of a select element

How to avoid onclick to work again after selecting option in html-select?

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

Change value of select list with value of another select list jquery

Enable/disable drop down list based on another drop down list

Categories

Resources