Selecting a value in drop down list using javascript - javascript

A] Summary of the problem:
Trying to pre-select a users country on page load
B] Details:
1] I am using maximinds javascript to find out a users county.
2] I have a drop down list which contains a list of 225 or so countries.
3] Inside the javascript section of my HTMLr page, I am trying to select the users country from the drop-down list.
But the country is not getting selected
C] Code excerpt:
<select name="country_name" id="id_country_name">
<option value="" selected="selected">---------</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aring land Islands">Aring land Islands</option>
</select>
<!-- including the geoip javascript library -->
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"></script>
<!-- By default, we will select users country -->
<script type="text/javascript" language="JavaScript">
document.getElementById(geoip_country_name()).selected = true
</script>
Thanks,
[Edit#1]
Tried the following jquery code, but this isnt populating the drop-down list:
<!-- including the geoip javascript library -->
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("option[value='" + geoip_country_name() + "']").attr('selected', 'selected');
});
</script>
[Edit#2]
Tried the $("#id_country_name").val(geoip_country_name());,
<div id="userDataForm">
<form method="POST" action="/UserReporting">
<table>
<!-- Printing the forms for users country, city -->
<tr><th><label for="id_country_name">Country name:</label></th><td>
<select name="country_name" id="id_country_name">
<option value="" selected="selected">---------</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aring land Islands">Aring land Islands</option>
<option value="Albania">Albania</option>
</select>
</td></tr>
<tr><th>
<label for="id_city_name">City name:</label></th><td><input type="text" name="city_name" id="id_city_name" /></td></tr>
</table>
<input type="submit" name="report_up" value= "Report Up">
<input type="submit" name="report_down" value= "Report Down">
</form>
<!-- including the geoip javascript library -->
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function () {
$("#id_country_name").val(geoip_country_name());
});
</script>

The document.getElementById call would only work if each <option> in your HTML had the country name as the id (replacing spaces with "_" or something similar):
<select name="country_name" id="id_country_name">
<option value="" selected="selected">---------</option>
<option id="Afghanistan" value="Afghanistan">Afghanistan</option>
<option id="Aring_land_Islands" value="Aring land Islands">Aring land Islands</option>
</select>
However, I'd lean towards this approach with jquery, as it doesn't require giving every option its own id:
$(function () {
$("#id_country_name").val(geoip_country_name());
});

Try
document.getElementById('id_country_name').selectedIndex=index;
where index is an integer corresponding to the selection you want.

Related

How can I create a textbox if a certain item is selected in a drop-down list?

I have a drop-down list that contains the following values:
<option>Aramex</option>
<option>DHL</option>
<option>FedEx</option>
<option>Other</option>
When the user select Other, I want to show a text box. How can I do that?
I'm using Laravel 4.2
One method:
<script type="text/javascript>
// Function to on change of the <select>, display the other input box
$(document).ready(function(){
$("#choices").on("change"),function(){
if($("#choices').val() == "Other"){
$("#otherinput").show();
}else{
$("#otherinput").hide();
}
});
});
</script>
<!-- hide the input box initially -->
<style>
#otherinput{display: none;}
</style>
<!-- These must have values since they're options, FYI, but set an ID for select and add values to options -->
<select id='choices'>
<option value='Aramex'>Aramex</option>
<option value='DHL'>DHL</option>
<option value='FedEx'>FedEx</option>
<option value='Other'>Other</option>
</select>
<!-- hidden until you select other option within the <select> -->
<input type='text' name='textinput' id='otherinput' />
here is the correct fix:
<script type="text/javascript">
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
else document.getElementById('div1').innerHTML='';
}
</script>
<select name="travel_arriveVia" id="travel_arriveVia" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="DHL">DHL</option>
<option value="Aramex">Aramex</option>
<option value="FedEx">FedEx</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>

Chosen.js Multiple select option

Is there a way to set up chosen on a multiple select box so that when items are selected just the option values are shown instead of the option name by default.
<select multiple>
<option value="A">America</option>
<option value="B">Barbados</option>
<option value="C">Canada</option>
</select>
So whenselected, the input box shows "A", "B" and or "C"
Thanks in advance
Make sure you are using the correct .js and .css files.
This works for me:
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.css">
</head>
<body>
<select multiple style="width: 500px;">
<option value="A">America</option>
<option value="B">Barbados</option>
<option value="C">Canada</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.jquery.min.js"></script>
<script>
$(document).ready(function() {
$('select').chosen();
});
</script>
</body>
In this example are used the external resources from cdnjs.cloudflare.com:
3.1.0/jquery.min.js
1.6.1/chosen.css
1.6.1/chosen.jquery.min.js

jquery mobile "select" does't append or remove "options"

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).bind('mobileinit',function(){
$.mobile.pushStateEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>jQuery.noConflict(true);</script>
<fieldset id="When" style="padding:0px; padding-top:5px; margin:0px; margin-top:5px;">
When
<select id="Dayy" onchange="DayChange()" data-native-menu="false">
<option value="12">Today</option>
<option value="13">Tomorrow</option>
<option value="14">In 2 days</option>
</select>
</fieldset>
<fieldset id="Time" style="padding:0px; margin:0px;">
Time
<select id="Timee" data-native-menu="false">
<option value="21">Now</option>
<option value="22">In few hours</option>
<option value="23">All Day</option>
<option value="24">Morning</option>
<option value="26">Noon</option>
<option value="28">Afternoon</option>
<option value="29">Evening</option>
<option value="31">Midnight</option>
</select>
</fieldset>
<script type="text/javascript">
function DayChange() {
var e = document.getElementById("Dayy");
var value = e.options[e.selectedIndex].value;
if (value != '12'){
$("#Timee option[value='21']").remove();
$("#Timee option[value='22']").remove();
}
else if (value == '12'){
$("#Timee").append('<option value="21">Now</option>');
$("#Timee").append('<option value="22">In few hours</option>');
}
}
</script>
When selecting "Tomorrow" from the first select (Dayy), "Now" and "In few hours" aren't removed, but when I open the second select (Timee) and select any option, "Now" and "In few hours" are removed. Same for the append !
Any solution ?
I tried using
$('#Timee').selectmenu("refresh", true); and
$('#Timee').selectmenu().selectmenu("refresh", true); also tried
$('#Timee').trigger("change");
but nothing worked for me! When adding data-role="none" it worked well but the jquery design disappear
What I want is that when I click Tomorrow -> "Now" and "In few hours" disappear and when I click today they reappear.
That the design I want to conserve
And that when select open
The problem seems to be in your onChange="DayChange()" call.
I changed the code to use a JQuery event, and it works:
$("#Dayy").on("change", function() {
DayChange();
})
JSFiddle: https://jsfiddle.net/L8da7qaz/1/
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script>
$(document).bind('mobileinit',function(){
$.mobile.pushStateEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>jQuery.noConflict(true);</script>
it was just an order problem, I just changed the script orders and added $("#Timee").selectmenu("refresh",true); and voila it worked like a charm :D

If a Select All option is Checked then display a div using bootstrap multiselect

After Selecting "Select All" option in the drop down list,I'll click on a generate graph button.Then I want to display a chart containing of all options in the drop down list in a particular div using bootstrap multi-select.
My code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Multi Select Dropdown with Checkboxes</title>
<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<div id="PiDiv"></div>
<div id="AllDiv"></div>
<form id="form1">
<div style="padding:20px">
<label>Select Country</label>
<select id="selectId" multiple="multiple">
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
<option value="Nepal">Nepal</option>
<option value="Iraq">Iraq</option>
<option value="China">China</option>
</select><br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
<script type="text/javascript">
$(function() {
$('#selectId').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
alert($('#selectId').val());
if($('#selectId').val() == "India"){
$("#PiDiv").load("/home/divya/html_docs/pi.html");
}
})
});
</script>
</div>
</form>
</body>
</html>
I'm able to select one option and display its corresponding chart.But for select all option,I'm not getting how to display a div after clicking on a generate graph button.Can anyone please suggest me on this issue ...
try this option. Change the html to below and replace your URL in data-url
<select id="selectId" multiple="multiple">
<option value="India" data-url="<!-- URL -->">India</option>
<option value="Japan" data-url="<!-- URL -->">Japan</option>
<option value="Germany" data-url="<!-- URL -->">Germany</option>
<option value="Nepal" data-url="<!-- URL -->">Nepal</option>
<option value="Iraq" data-url="<!-- URL -->">Iraq</option>
<option value="China" data-url="<!-- URL -->">China</option>
</select>
jQuery Code
$('#btnget').click(function() {
$("#PiDiv").empty();
$('#selectId option:selected').each(function(index,elem){
if(typeof $(elem).data('url') != "undefined"){
$.get( $(elem).data('url'), function( data ) {
$("#PiDiv").append(data);
});
}
});
})

prevent the combo box from changing its value

I have 4 Combo boxes, attr1, attr2, attr3, attr4
Based on one the other will be painted in jquery Ajax.
Requirement is
if attr1 size is 1 automatically attr2 should be loaded,if attr2 size is 1 then attr3 should be loaded, but if attr2 size is greater than 1 value, then a value in combo is selected and attr3 are loaded.like wise the other two also should be done.
How to prevent the combo box from changing its value load the next combo?? is there any events to prevent the selection but a call to js function should be done??
Can you please post some code or what you have tried e.g.
script:
<script type="text/javascript">
$(
function()
{
$('#officeItemList').combobox();
});
</script>
HTML:
<head>
<title>jquery.combox example</title>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery.dimensions.js"></script>
<script type="text/javascript" src="Scripts/jquery.combobox.js"></script>
</head>
<body>
<select id="officeItemList">
<option value="1">eraser</option>
<option value="3">pencil</option>
<option value="4">ruler</option>
<option value="5">ink</option>
<optgroup label="paper types">
<option value="7">A4 paper</option>
<option value="8">A3 paper</option>
<option value="9">letter-sized paper</option>
</optgroup>
<optgroup label="chair types">
<option value="10">executive</option>
<option value="11">janitor</option>
<option value="12">developer</option>
</optgroup>
</select>
</body>

Categories