Develop Reference

Converting a JavaScript function to jQuery - Select option list

This is literally the first time I've worked with jQuery and I've read the entire chapter in my textbook but am finding a hard time wrapping my head around it. I'm attempting to convert a JavaScript function (a simple option selection drop-down list) to jQuery. I've attempted a few lines of code that I've gotten from the book or from w3schools and api.query but to no avail. I'll try to make this quick and simple, I just cannot understand jQuery for some reason.
What I've attempted usually doesn't work. Before my option list works fine, then I tried experimenting but I didn't get too far.
I also apolgize for the vagueness of the question, I'd appreciate any help!
Here's something I've tried:
$(document).ready( function () {
var c = ???
if ($(c...
calc.js and index.html below it
function selectedCountry() {
var c = document.getElementById("countryChooser").value;
var message;
if (c == "nothing") { //if they selected the default option, error pops up.
alert("Please select a country.");
} else if (c == "usa") {
message = "United States of America";
document.getElementById("count").innerHTML = "Your country is: " + message;
} else if (c == "canada") {
message = "Canada";
document.getElementById("count").innerHTML = "Your country is: " + message;
} else {
message = "Mexico";
document.getElementById("count").innerHTML = "Your country is: " + message;
}
}
<script src = "calc.js"></script> <!--JavaSript link -->
<select name="countrylist" id="countryChooser" onchange="selectedCountry()">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

Through jQuery you can do it like below:-
Example:-
$(document).ready(function(){
$('#countryChooser').change(function(){ // on change of select
if($(this).val()!=='nothing'){ // if selected value is some country
$('#count').html("Your country is: "+$("#countryChooser option:selected").text()); // get country name and add it to paragraph
}else{
$('#count').html("");
alert('Please select a country.'); // alert for selecting a country
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="countrylist" id="countryChooser">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

Get an element by id:
var c = $('#countryChooser');
Get the value of this input/select element
var value = c.val();
Set the html of an element using the element id
$('#count').html('some html');
or set the text (html is not parsed this way)
$('#count').text('some html');
You can also handle the events with jQuery
$(document).ready(function() {
$('#countryChooser').on('change', function(event) {
// this is the DOM element with the id 'countryChooser'
// same as the native: var val = this.value;
var val = $(this).val();
// ...
});
});

I have bind the onchange() event of your select list inside the jQuery(document).ready() method. check this out-
// Updated code--
$(document).ready(function (){
$('#countryChooser').on('change' ,function () {
if(this.selectedIndex){
$('#count').html("Your country is: "+ this.options[this.selectedIndex].text);
}else{
$('#count').html("");
alert("Please select a country.");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "calc.js"></script> <!--JavaSript link -->
<select name="countrylist" id="countryChooser">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

$('#countryChooser').change(function(){
var selectedCountry = $(this).val();
if(selectedCountry == 'nothing'){
console.log('Select A country');
}
else{
$('#count').html('Your country is '+$('#countryChooser option:selected').text());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--JavaSript link -->
<select name="countrylist" id="countryChooser" >
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>
Please check the code might help you out
thanks

How can i add value in Option Select?

i have a textarea text "ez.aaaa.value" i want to typing a text and when i select option , redirect automatically to google.com/search?tbm=isch&q= + ((value textarea))
image
Example :
........
<option value="href='http://www.google.com/search?tbm=isch&q=' + ez.aaaa.value">google search</option>
........

This should do it.
the location.href is what you would use to link out.
this refers to the select and selectedIndex returns the number of the selected option.
var sel = document.getElementById('mysel'),
query = document.getElementById('myquery');
sel.addEventListener('change' , function() {
console.log(this.options[this.selectedIndex].value + query.value);
// this would be how to link below
// location.href = this.options[this.selectedIndex].value + query.value;
});
<input type='text' id="myquery">
<select id="mysel">
<option>SELECT ONE</option>
<option value="http://google.com?q=">google</option>
<option value="http://bing.com?q=">bing</option>
</select>

Add select with ID outside of your option and then try this way
JS
var e = document.getElementById("select-menu");
var strUser = e.options[e.selectedIndex].value;
console.log(strUser);
HTML
<select id="select-menu">
<option value="href='http://www.google.com/search?tbm=isch&q=' + ez.aaaa.value">google search 1</option>
<option value="href='http://www.google.com/search?tbm=isch&q=' + ez.aaaa.value" selected="selected">google search 2</option>
</select>

Select empty value in dropdown list with jQuery if not contains string

I'am trying to select the empty (first) value of a dropdown select option if it does not contains the value from an another dropdown select list:
$('#FirstDropdown').change(function() {
if ( $('#SecondDropdown option').filter(':contains(' + this.value + ')') ){
$('#SecondDropdown option').filter(':contains(' + this.value + ')').prop('selected',true);
}else{
$("#SecondDropdown option[value='']").prop('selected',true);
}
});
This code work well if #SecondDropdown option contains this.value but the else statement doesn't reset the dropdown list if not.
Any suggestion please ?
EDIT : The dropdown lists look like this :
<select id="FirstDropdown">
<option value="" selected="selected"> </option>
<option value="VAL1">First Value</option>
<option value="VAL2">Second Value</option>
<option value="VAL3">Third Value</option>
<option value="VAL4">Fourth Value</option>
</select>
<select id="SecondDropdown">
<option value="-1"> </option>
<option value="12">VAL1 SELECT OPTION</option>
<option value="15">VAL2 SELECT OPTION</option>
<option value="10">VAL3 SELECT OPTION</option>
</select>
EDIT : Added a JsFiddle.

You do not have any option element having value=''. You need to use $("#SecondDropdown option[value='-1']").prop('selected',true); . you would also need to change the condition in if statement to this.value!='':
$('#FirstDropdown').change(function() {
if ( this.value!='' ){
$('#SecondDropdown option').filter(':contains(' + this.value + ')').prop('selected',true);
}else{
$("#SecondDropdown option[value='-1']").prop('selected',true);
}});
Working Demo

Try this :There is problem in your if condition as it is getting always true. You can use .length to check if option exist and select the option else select blank
$('#FirstDropdown').change(function() {
if ($('#SecondDropdown option:contains('+this.value +')').length>0){
$('#SecondDropdown option:contains('+this.value +')').prop('selected',true);
}else{
$("#SecondDropdown option[value='-1']").prop('selected',true);
}
});
JSFiddle Demo

This will work for you.
First, you have to check you this.value, because any string contains ''.
Second, as if works fine, you just need to filter options by [value=-1]
Final JS:
$('#FirstDropdown').change(function() {
var $second = $('#SecondDropdown option').filter(':contains(' + this.value + ')');
if (this.value && $second){
$second.prop('selected',true);
}else{
$("#SecondDropdown option[value=-1]").prop('selected',true);
}
});

Update dropdown menu text with selected option text after page redirect

Hello i would like to update the drop down text with the selected option text after page redirect and drop down reloaded.
Here is my code
<div class="sorting-option">
<select id="selectdropdown" class="dropdown-select">
<option value="">Recommended Items</option>
<option value="?sort1desc=F&sort1=Item_NAME">Name (A-Z)</option>
<option value="?sort1desc=T&sort1=Item_NAME">Name (Z-A)</option>
<option value=".f?sort1desc=F&sort1=Item_ONLINECUSTOMERPRICE">Price (Low-
High)
</option>
<option value=".f?sort1desc=T&sort1=Item_ONLINECUSTOMERPRICE">Price (High
Low)
</option>
</select>
</div>
when i select any option from this drop down it loads the page and open that link which is there in the value section of that option.
after every time the page loads i see only recommanded items option text not the one which i selected from the drop down. Like if i select Name (Z-A) it should update to the Name (Z-A) in the dropdown after page load.
I have tried this code so far but its not giving me the expected result
$(document).ready(function () {
$('#selectdropdown').change(function () {
location.href = $(this).val();
$("#selectdropdown option:selected").text();
});
});

You can use selected attribute in options in <select>.
Put name attribute in select, and when you are submitting a form, fetch the same after page load, and place a condition so select the item.
<if selectdropdown = "sort1desc=F&sort1=Item_NAME"> selected<endif>
Like :
<div class="sorting-option">
<select id="selectdropdown" class="dropdown-select" name= "selectdropdown">
<option value="">Recommended Items</option>
<option value="?sort1desc=F&sort1=Item_NAME" <if selectdropdown = "sort1desc=F&sort1=Item_NAME"> selected<endif> >Name (A-Z)</option>
<option value="?sort1desc=T&sort1=Item_NAME">Name (Z-A)</option>
</select>
</div>
Put the same for all the options.

You can follow these steps.
Pass the selected value in the url.
When the page loads you can check those values from URL to make the value auto selected.
$(document).ready(function() {
$("#social").change(function(event) {
var target_url = $(this).val();
//pass the target url in the url scope
var redirect_url = target_url + "?social=" + target_url;
location.href = redirect_url;
});
//on page load get the url values to select it from dropdown.
var urlvars = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
var keys = urlvars[0].split('=');
var default_select = keys[1];
$('#social').val(default_select);
});
<form>
<select id="social">
<option value="http://localhost/index.cfm">Default</option>
<option value="http://localhost/a.cfm">Google</option>
<option value="http://localhost/b.cfm">Facebook</option>
</select>
</form>

You can check url parameter for sort1desc and assign the value to select box. Here is jquery code.
$(document).ready(function () {
var sortParam = getUrlParameter("sort1desc");
alert(sortParam);
$('#selectdropdown option').each(function() {
var str = $(this).attr('value');
if(str.indexOf("sort1desc="+sortParam) >= 0) {
$('#selectdropdown').val($(this).attr('value'));
}
});
$('#selectdropdown').change(function () {
location.href = $(this).val();
$("#selectdropdown option:selected").text();
});
});
function getUrlParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}

You could use localStorage.getItem() and localStorage.setItem(); to save the selected value and then reselect the value in your ready-function.
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage
$(document).ready(function() {
var opt = document.querySelector('#selectdropdown option[value="' + localStorage.getItem('selectdropdownselectedvalue') + '"]');
if (opt) opt.selected = true;
$('#selectdropdown').change(function() {
localStorage.setItem('selectdropdownselectedvalue', document.querySelector('#selectdropdown').value);
location.href = $(this).val(); //instant redirect
//$( "#selectdropdown option:selected" ).text(); <-- not possible because js is already about to redirecting
});
});
Working example (without jquery):
<select id="selectdropdown" onchange="changed(this)">
<option>nothing</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
</select>
<script>
var opt = document.querySelector('#selectdropdown option[value="' + localStorage.getItem('selectdropdownselectedvalue') + '"]');
if (opt) {
opt.selected = true;
}
function changed(dd) {
localStorage.setItem('selectdropdownselectedvalue', document.querySelector('#selectdropdown').value);
window.location = location.href;
}
</script>

option is still visible in select after remove()

Hi all I have two select fields, on select field first if user select option value one or two then in select field of second all options are visible but if it select option two in first then option two want to remove from select id second. Following is my code:
<script type="text/javascript">
var index3,str;
</script>
<select id="first" onchange="chk();">
<option value = "one">one</option>
<option value = "two">two</option>
<option value = "three">three</option>
</select>
<select id="second">
<option value = "one">one</option>
<option value = "two">two</option>
<option value = "three">three</option>
</select>
<script type="text/javascript">
function chk()
{
index3 = document.getElementById("first");
str= index3.options[index3.selectedIndex].value;
alert("str:"+str);
if (str=="two")
{
$("#second option[value='two']").remove();
}
else
{
if ( $("#second option[value='two']").length == 0 )
{
$("#second").append('<option value="two">two</option>');
}
}
}
</script>
In fiddle it works fine here, But on mobile problem is: If I select option two from select id second, and then select option value two in first select id, then also option two is visible in second select id, if I click on second select id then only it removes. But in jsFiddle it works perfect. Any suggestion will be appreciated, Thanks in advance.

Here i have done complete bin for above issue. please go through demo link.
Demo http://codebins.com/bin/4ldqp7p
HTML
<select id="first">
<option value = "one">
one
</option>
<option value = "two">
two
</option>
<option value = "three">
three
</option>
</select>
<select id="second">
<option value = "one">
one
</option>
<option value = "two">
two
</option>
<option value = "three">
three
</option>
</select>
jQuery
$(function() {
$("#first").change(function() {
var optVal = $(this).val().trim();
if (optVal == "two") {
$("#second").find("option[value=" + optVal + "]").remove();
} else {
if ($("#second").find("option[value=two]").length <= 0) {
$("<option value=\"two\">two</option>").insertAfter($("#second").find("option[value='one']"));
}
}
});
});
Demo http://codebins.com/bin/4ldqp7p

check this Edit
$('#first').change(function() {
$("#second option[value='" + $(this).val() + "']").remove();
});

Your code looks a bit odd overall. If your intention is to remove the item from 'second' if it is selected in 'first', try this update: http://jsfiddle.net/NWbXt/58/
$(function() {
var first = $('#first'),
second = $('#second'),
removed;
first.change(function() {
var selected = first.val();
second.append(removed); //.. add back old option
removed = second.find('option[value="' + first.val() + '"]').remove();
}).trigger('change');
});​