We Keep Coding

get a few selected option javascript [duplicate]

This question already has answers here:
get multiple values from dropdownlist in JavaScript
(3 answers)
Closed 3 years ago.
How do I get the selected value from a dropdown list in case there are more than one selected item using JavaScript? For example:
<select name"nana" id="nana">
<option value="0"</option>
<option value="1"</option>
<option selected="selected" value="2"</option>
<option value="3"</option>
<option selected="selected" value="4"</option>
</select>
I tried:
var e = document.getElementById("nana");
var strUser = e.options[e.selectedIndex].value;
and
document.querySelector("nana").value;
but it returns only the first selected value (2). How can I get all of the selected values?

add multiple="multiple" for multiple for more than 1 select
var selectNana = document.getElementById("nana");
var selectedNana = [];
for (var i = 0; i < selectNana.length; i++) {
if (selectNana.options[i].selected) selectedNana.push(selectNana.options[i].value);
}
console.log(selectedNana);
<select name"nana" id="nana" multiple="multiple" >
<option value="0">0</option>
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option selected="selected" value="4">4</option>
</select>

First make sure your HTML syntax is correct - open tags, like <option, need closing >s too.
Use the query string #nana > option[selected] to select children with the selected attribute, then map to their values:
const selectedValues = Array.from(
document.querySelectorAll('#nana > option[selected]'),
option => option.value
);
console.log(selectedValues);
<select name="nana" id="nana">
<option value="0"></option>
<option value="1"></option>
<option selected="selected" value="2"></option>
<option value="3"></option>
<option selected="selected" value="4"></option>
</select>

How to add DIV's dynamically in a form based on a select input with Jquery

var beneficiarioDiv = $('<div class="beneficiario-wrap"><label for="nombre_bene">Nombre y Apellido</label><input type="text" name="nombre_bene" value=""><label for="nombre_bene">Cedula beneficiario</label><div><select name="cedulabene_tipo"><option value="Venezolano" selected>V </option><option value="Extranjero">E </option></select> <input type="text" name="cedulabene_no" value="" maxlength="8"></div><label for="edad_bene">Edad beneficiario</label><input type="text" name="edad_bene" value=""></div>');
$('#beneficiarios').change(function() {
var beneficiarios = $('#beneficiarios :selected').val();
// this gives me the value that the user selected
<div class="beneficiarios-wrapper"></div>
// this is the div where I want to append the number of divs selected by the user
});
<label for="beneficiarios">Cantidad de beneficiarios</label>
<select name="beneficiarios" id="beneficiarios">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
I have been hitting my head cuz I can't think on a way to get this to work ( I'm new with Jquery )
So.. I have a select input field in a form with number options.. I want to check which of the options the user selected and add a DIV the number of times the user selected ( from 0 to 10 ) and if the user selects a number lower than the one he previously chose delete the DIVs previously added and add the ones he now chose (if he selects number 3 add 3 DIVs, if he now selects 2 because he was just mistaken then just show 2 instead of the 3)
I know how to get the number the user selected with the .change event listener and the :selected.val() method.. my problem is appending the divs that number of times the user selected, and deleting them if the user selects a number lower than.
Please i don't know how to make this work!

In your change function, first clear the wrapper and then append the divs in a loop
var beneficiarioDiv = '<div class="beneficiario-wrap"><label for="nombre_bene">Nombre y Apellido</label><input type="text" name="nombre_bene" value=""><label for="nombre_bene">Cedula beneficiario</label><div><select name="cedulabene_tipo"><option value="Venezolano" selected>V </option><option value="Extranjero">E </option></select> <input type="text" name="cedulabene_no" value="" maxlength="8"></div><label for="edad_bene">Edad beneficiario</label><input type="text" name="edad_bene" value=""></div>';
$('#beneficiarios').change(function() {
var beneficiarios = $('#beneficiarios :selected').val();
// this gives me the value that the user selected
$('.beneficiarios-wrapper').empty();
while (beneficiarios--) {
$('.beneficiarios-wrapper').append(beneficiarioDiv);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="beneficiarios">Cantidad de beneficiarios</label>
<select name="beneficiarios" id="beneficiarios">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div class="beneficiarios-wrapper"></div>

You can clear the div on change event. Then use a for loop to append div
const divToAppend = '<div>test</div>';
let number = $('#beneficiarios').val();
$('#beneficiarios').on('change', function () {
$('#placeholder').html('');
number = $(this).val();
for (let i = 0; i < number; i++) {
$('#placeholder').append(divToAppend);
}
});
<label for="beneficiarios">Cantidad de beneficiarios</label>
<select name="beneficiarios" id="beneficiarios">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="placeholder"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You could just append the divs in a loop:
var b = = $('#beneficiarios :selected').val();
while(b--) {
$(".beneficiarios-wrapper").append("<div>"+b+"</div>")
}

Select Dropdown based on the partial value in dropdown value field

I have a scenario where i have to select the drop value based on querystring.
Query string could be likeq=c-1 q=c-2 q=p-5
and value in drop-down could be value="8-P-5" value="5-G-0" value="7-P-7"
How can i select the drop-down value based on query-string
Is it possible to do it from Code-behind C# or jquery is easy solution.
<select name="ctl00$ContentPlaceHolder1$ddlOptionGroup" id="ContentPlaceHolder1_ddlOptionGroup" class="form-control">
<option value="1-C-1">Item 1</option>
<option value="4-C-2">Item 2</option>
<option value="5-G-0">Item 3</option>
<option value="7-P-7">Item 4</option>
<option value="8-P-5">Item 5</option>
<option value="10-C-4">Item 6</option>
<option value="3-P-0">Item 7</option>
<option value="2-P-0">Item 8</option>
<option value="6-G-0">Item 9</option>
</select>
If query-string is q=c-2 then this should be selected <option value="4-C-2" selected>Item 2</option>

If you are open for a JavaScript/jQuery solution you can take the window.location.search and then use a jQuery selector to find the option based on a contains condition in a specific select tag.
Do note that this assumes the value that comes in your q is uniquely identifiable in a value property of your select element. In your current dataset q=p-0 will have both Item 7 AND Item 8 match. As you didn't provide a business rule for that case I left that here untouched.
Here is a snippet that demonstrate this:
// use window.location.search
var search = '?q=p-5'; // window.location.search;
// handle possible search for this value ?foo=bar&q=p-5#fragment
var parms = search.substr(1).split('&');
for(var i=0; i< parms.length;i++)
{
var keyValue= parms[i].split('=');
if (keyValue[0] === "q" && keyValue.length > 0) {
var value = keyValue[1].split('#');
$('select > option[value*="' + value[0].toUpperCase() + '"]').prop('selected',true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="ctl00$ContentPlaceHolder1$ddlOptionGroup" id="ContentPlaceHolder1_ddlOptionGroup" class="form-control">
<option value="1-C-1">Item 1</option>
<option value="4-C-2">Item 2</option>
<option value="5-G-0">Item 3</option>
<option value="7-P-7">Item 4</option>
<option value="8-P-5">Item 5</option>
<option value="10-C-4">Item 6</option>
<option value="3-P-0">Item 7</option>
<option value="2-P-0">Item 8</option>
<option value="6-G-0">Item 9</option>
</select>

for (int i = DropDownList1.Items.Count-1; i >0 ; i--)
{
if (DropDownList1.Items[i].Value.Contains("C-2"))
{
DropDownList1.Items[i].Selected = true;
break;
}
}
or you can do it by Linq syntax
DropDownList1.Items.Cast<ListItem>()
.Where(x => x.Value.Contains("C-2"))
.LastOrDefault().Selected = true;

How to select a valid random value from drop down using NightwatchJS?

I am trying to automate some UI testing with nightwatch.js, I need to select a random value from the drop down which looks like the code below.
<select class="form-control" name="drop_ddl" id="drop_ddl">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
As of now I am using an approach where I have no reliability in case the random number I have selected doesn't exist in the drop down option values.
var drop_ddl=Math.floor((Math.random() * 8) + 1);
return this.client.click("#drop_ddl option[value='"+drop_ddl+"']");
In case the random number is say 6 which doesn't appear in the list it will fail the further tests.
Is there a way we can read the values to an array and then select randomly out of these available values only ?

Use elements to get all the drop down options.
browser.elements('css selector', '#drop_ddl option', function(result) {
return result.value.length;
})
Now that you have the number of options, use nth-child to select a random option.
var drop_ddl=Math.floor((Math.random() * optionsLength) + 1);
return this.client.click("#drop_ddl option:nth-child(drop_ddl)");

How about adding sequential IDs to the options?
<select class="form-control" name="drop_ddl" id="drop_ddl">
<option id="1" value=""></option>
<option id="2" value="1">1</option>
<option id="3" value="2">2</option>
<option id="4" value="3">3</option>
<option id="5" value="4">4</option>
<option id="6" value="7">7</option>
<option id="7" value="8">8</option>
<option id="8" value="9">9</option>
<option id="9" value="11">11</option>
<option id="10" value="12">12</option>
</select>
<script>
var drop_ddl=Math.floor((Math.random() * 10) + 1);
$("#drop_ddl option[id='" + drop_ddl + "']").attr("selected", "selected");
</script>

Came across similar case, when you have to select random Radio button. This is a bit tricky - you can't really use :nth-child selector, because bloody bastards could be spread all over the place. In this case you can use:
exports.command = function (selector, value) {
this
.elements('css selector', selector, res => {
if (res.value.length) {
let random = Math.floor(Math.random() * res.value.length);
let el = res.value[random].ELEMENT;
this.elementIdClick(el);
}
});
return this;
};

logic required in javascript

i have a select option which works fine,but what i want is if more than one is selected then 10 % discount has to be added, how can this be done
and on selected the value multiplies in Java script
//javascript
function totprice(f,n,amt)
{
var tot=0;
document.getElementById('lbl_tot'+n).value=amt*f;
for (var k=1; k<=document.getElementById('rowcnt').value; k++)
{
if(document.getElementById('lbl_tot'+k))
{
tot=parseInt(tot) + parseInt(document.getElementById('lbl_tot'+k).value);
}
}
document.getElementById('txttot').value=tot;
document.getElementById('txttotprice').value=tot;
}
HTML
<select name="amt" id="amt" onchange="return totprice(this.value,2,110);">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>

Your select tag should be
<select name="amt" id="amt" onchange="return totprice(this.value,2,110);" multiple>
To make it multi select. Now when user will select multiple options (using Shift+click) then in your JavaScript function get these values and do the processing (provide discount/ any logic)
Updated
You wish to multiply the value the user has selected with the discount amount (110)
In your JS have this
var x = parseInt(f)*parseInt(amt);
If f = 2 and amt = 110 then x = 220. You need to do parseInt(value, radix) by default radix is 10
EXAMPLE:
var optionSelected = document.getElementById('amt').value; //optionSelected is nothing but this.value
if(optionSelected > 1)
{
//Offer discount
var x = parseInt(f)*parseInt(amt); //where f and amt is passed through function call
}
else
{
// Do nothing/ other logic
}
Hope this helps!!