Develop Reference

How to display all options of a dropdown list on the website?

I have a dropdownlist (SELECT1) that looks like this:
<select id="ff_elem263">
<option selected="selected" value="0">Choose amount</option>
<option value="32">50</option>
<option value="52">100</option>
<option value="78">150</option>
<option value="95">200</option>
<option value="119">250</option>
<option value="606">1500</option>
</select>
I need two outputs in columns:
First I need to display all options on the website using HTML output like this:
(Options only - first index line which says "Choose amount" needs to be ignored)
Expected output like this:
50
100
150
200
250
1500
Secondly I need to display the result of a calculation where the numbers are devided by another variable which already has been created beforehand.
Let us call the variable "devider" and - as an example - set it to 3.
So 50/3 = 16,6666, 100/3 = 33,3333 etc. etc.
So the second column would look like this:
16,6666
33,3333
50
66,6663
83,3333
500
I will add those numbers to a div with ID=demo2
As an endresult I will need this:
50 16,6666
100 33,3333
150 50
200 66,6663
250 83,3333
1500 500
I tried to mix different approaches - but without luck. I wasn't even able to just output the first column displaying the options only. (Not the values).
Example 1.
This one displays the options in a popup. But I need it as text on my website:
$(function(){
var values = $('select').children('option').map(function(i,e){
return e.innerText;
}).get();
alert(values);
});
Example 2: console.log.
I tried this one also, but could not figure out how to pickup the data from my SELECT1 element instead. And also avoid using console.log altogether. It would be better to directly output the text on my website.
var friends_arr = ["Sonarika","Vishal","Sunil","Vijay"];
$(document).ready(function(){
$.each(friends_arr, function(index,value){
console.log( index + " : " + value );
});
});
I am currently using this one for experimenting:
<p id=demo1></p>
$(function(){
var values = $('select1').children('option').map(function(i,e){
return e.innerText;
}).get();
alert(values);
});
But how can I output the result as HTML text to my DIV ID=demo1? Also I think here needs to be added some kind of splitter?

try this it will helps
$(document).ready(function(){
$("#ff_elem263 option").each(function()
{
if($(this).val() != "0"){
var val = parseInt($(this).html())/3;
$("#demo2").append("<label>"+$(this).html()+" "+val.toFixed(4)+"<label>");
}
});
})
label{
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ff_elem263">
<option selected="selected" value="0">Choose amount</option>
<option value="32">50</option>
<option value="52">100</option>
<option value="78">150</option>
<option value="95">200</option>
<option value="119">250</option>
<option value="606">1500</option>
</select>
<div id="demo2">
</div>

var values = [];
$('#ff_elem263 option').each(function() {
values.push( $(this).attr('value') );
if($(this).attr('value') != 0){
$( "#demo" ).append("<div>"+$( this ).text()+"::"+$( this ).text()/3+"</div><br/>");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ff_elem263">
<option selected="selected" value="0">Choose amount</option>
<option value="32">50</option>
<option value="52">100</option>
<option value="78">150</option>
<option value="95">200</option>
<option value="119">250</option>
<option value="606">1500</option>
</select>
<div id="demo">
</div>

Remove and add values from dropdown using javascript/jQuery

I am trying to achieve the following thing in my code but it is getting complicated.
I have 'n' dropdowns with or without duplicate values in it.
for simplicity lets assume following scenario:
dropdown1:
<select>
<option>100</option>
<option>200</option>
<option>102</option>
</select>
dropdown 2:
<select>
<option>100</option>
<option>200</option>
<option>201</option>
</select>
dropdown3 :
<select>
<option>100</option>
<option>300</option>
<option>301</option>
</select>
case1:
if user select value 100 from dropdown 1 then 100 should be removed from all the dropdowns.and when user change dropdown 1 value from 100 to 200 then 100 should be added back to all the dropdowns and 200 should be removed from all the dropdowns.
removing seems easy but adding back values is little difficult.
how can I maintain a list or some other data structure to remember which value to add and where incase of multiple value change? is there any advance jquery feature or generic javacript logic i can use ?

If it is sufficient to just disable the option instead of actually removing it, the following could work for you. You might want to adapt the handling of the selects when initially loading the site.
$('select option[value="' + $('select').eq(0).val() + '"]').not(':eq(0)').prop('disabled', true);
$('select').on('change', function() {
var val = $(this).val();
$('select option').prop('disabled', false);
$('select option[value="' + val + '"]').not($(this)).prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value='100'>100</option>
<option value='200'>200</option>
<option value='102'>102</option>
</select>
<select>
<option value='100'>100</option>
<option value='200'>200</option>
<option value='201'>201</option>
</select>
<select>
<option value='100'>100</option>
<option value='300'>300</option>
<option value='301'>301</option>
</select>

It would be better to set display to none instead. Hence, you will avoid the complications of adding or removing in the appropriate order.
So, you can easily return them visible.
$( "option" ).each(function( index ) {
$(this).css("display", "");
});

$("#drop").change(function () {
var selected_value=$(this).val();
var dropdown=$(select);
for(i=0;i<dropdown.length;i++){
$("dropdown[i] option[value=selected_value]").remove();
}
});
Set id of first dropdown="drop"
Here select the value and define it S a variable loop through dropdown with in page remove option when value=selected_value

How you can I put selected = "selected" dynamic?Jquery

I have this sample:
link
CODE HTML:
<select name="card_type" id="card_type" class="card-sel com-c select-full">
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="discovery">Discovery</option>
<option value="maestro">Maestro</option>
</select>
CODE JS:
$( document ).ready(function() {
var stateSelectValue = "Mastercard"; //this value in my site returns a dynamic type of card
console.log("primul log" + stateSelectValue);
if(stateSelectValue)
{
console.log("al doilea log" + stateSelectValue); $("#card_type").val(stateSelectValue).attr("selected","selected").trigger("change");
console.log("al treilea log" + stateSelectValue);
}
$( ".com-c" ).change(function() {
var data= $(this).val();
console.log(data);
});
});
Perhaps the example understand what they want to do.
Basically when they are receiving a value in the variable stateSelectValue to look if there is value in that list and make selected.
For example IF:
var stateSelectValue = "Mastercard";
then
<option value="mastercard" selected="selected">Mastercard</option>
and so on...
Can you help me to solve this problem please?
Thanks in advance!

First as I have already commented, you do not need to set attribute selected and trigger change function.
$("#card_type").val(stateSelectValue)
This should be enough.
Second, if you do this change, still it will not work. W
Why?:
Variable value:
var stateSelectValue = "Mastercard";
is not equal to value of option
<option value="mastercard">Mastercard</option>
Updated Codepen

You were all good just one typo mistake, your selected value was in capital i.e "Mastercard" where as in option value it was "mastercard". But in simple way doing below was enough without trigger change event.
var stateSelectValue = "mastercard";
$("#card_type").val(stateSelectValue)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<select name="card_type" id="card_type" class="card-sel com-c select-full">
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="discovery">Discovery</option>
<option value="maestro">Maestro</option>
</select>

This question already asked some . please refers the below link:
JQuery setting the selected attribute on a select list

$(document).ready(function () {
$('#card_type').val("mastercard"); // Select by value
text1 = "Maestro";
$("#card_type option:contains(" + text1 + ")").attr('selected', 'selected'); // select by text
});

Get select element by selected value

I'm looking for a way to get a select element using it's selected value.
It's easy for options : $('option[value="lol"]');
But it's not working with $('select[value="lol"]');
Is it possible to do this with a simple selector ?

You could use a filter?
$("select").filter(function() {
return $(this).val() === "lol";
});
jsFiddle Example
This is assuming you want all <select> elements where the lol option is actually selected. If you just wanted to check to see if the select contains the lol option, selected or not, you can use parent:
$('option[value="lol"]').parent();
jsFiddle Example

You could use something like this in jQuery:
var lol = getSelect(1);
lol.css({
"color": "red"
});
function getSelect(i) {
var option = $('select option[value="' + i + '"]');
return option.parent('select');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>

remove all options from select jquery but only one

I have a select that contain this values:
<select id="lstCities" class="valid" name="City">
<option value="OSNY">OSNY</option>
<option value="dd">dd</option>
<option value="OSffNY">OSffNY</option>
<option value="ANTONY">ANTONY</option>
<option value="0">Autre...</option>
</select>
How can I delete all options but i would like to keep only
<option value="0">Autre...</option>
My problem is my list is dynamic sometimes I have 3,5,7,.... select + the last one <option value="0">Autre...</option>

select all options, then exclude the one with that value :
$('#lstCities option[value!="0"]').remove();
FIDDLE

Try
$('#lstCities option:lt(-1)').remove()
Demo: Fiddle

$('#lstCities option[value!=0]').remove()
You should remove by value and not rely on the position of the option element to keep.

If the option is always the last one, I hope this JavaScript code can help you:
var lastNode = $("#lstCities option").last();
var option = { value:lastNode.val(), text:lastNode.text() };
$('#lstCities').find('option').remove().end().append($('<option>',{
value:option.value,
text:option.text,
}));
Learned from this post

This worked for me:
$("#selectList option").remove();