We Keep Coding

How to get option tag custom data value using pure JS?

function calculateDeliveryCharge()
{
var CA=document.getElementById("pickup");
var c=CA.options[CA.selectedIndex].getAttribute('data-area');
alert(c);
}
<div class="container">
<div class="row">
<div class="col-12">
<select id="pickup" placeholder="পিকআপ এলাকা নির্বাচন করুন">
<option value="">পিকআপ এলাকা.....</option>
<option value="300 Feet"data-area="1">৩০০ ফিট (300 Feet)</option>
<option value="Adabor" data-area="1">আদাবর(Adabor)</option>
<option value="Adarsha Nagar(Badda)"data-area="1">আদর্শ নগর(বাড্ডা)- Adarsha Nagar(Badda)</option>
<option value="Aftab Nagar"data-area="1">আফতাব নগর(Aftab Nagar)</option>
<option value="Aga Nagar"data-area="1">আগা নগর(Aga Nagar)</option>
<option value="Agargaon"data-area="1">আগারগাঁও(Agargaon)</option>
<option value="Ahalia-Uttara"data-area="1">আহালিয়া-উত্তরা(Ahalia-Uttara)</option>
<option value="Ahmed Nagar"data-area="1">আহমেদ নগর(Ahmed Nagar)</option>
<option value="Ainusbag"data-area="1">আইনুসবাগ(Ainusbag)</option>
<option value="Ainusbag-Dakshinkhan"data-area="1">আইনুসবাগ-দক্ষিণখান(Ainusbag-Dakshinkhan)</option>
<option value="Ajiz Market"data-area="1">আজিজ মার্কেট(Ajiz Market)</option>
<option value="Alatunnessa School Road"data-area="1">আলাতুন্নেছা স্কুল রোড(Alatunnessa School Road)</option>
<option value="Alubazar"data-area="1">আলুবাজার(Alubazar)</option>
<option value="Amin bazar"data-area="1">আমিন বাজার(Amin bazar)</option>
<option value="Apollo"data-area="1">অ্যাপোলো(Apollo)</option>
</select>
</div>
</div>
<button class="border-1 p-2 bg-danger text-white"onclick="calculateDeliveryCharge()">ডেলিভারি চার্জ দেখুন</button>
</div>
I want to get the custom data attribute "data-area" value, 1 expected is here but I am getting null every time. What is the problem in my code and what is the solution?

This is a bit easier.
document.querySelector('#pickup option:checked').dataset.area
If we use #pickup, we selecting by ID as you have above. But by also specifying option:checked, we're looking for the currently selected option. (:checked is a bit weird here, but it's consistent with how other input elements work, such as checkboes.) Next, if you want the area data option, we can access it on the dataset property directly.

If nothing is selected, or the option does not contain the data-area property, your result will be not as expected.
It is generally not a good idea to use inline event handlers.
Here's a snippet using event delegation.
// => onclick="calculateDeliveryCharge()" becomes
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.nodeName === `BUTTON`) {
const selectr = document.querySelector("#pickup option:checked");
// find the selected option using a css selector ^^^
// this statement returns the option element when something
// is selected, null if nothing is selected
console.clear();
if (selectr &&
selectr.dataset.area) {
// ^ a data attribute value can be found using the elements' "dataset"
return console.log(`Area: ${selectr.dataset.area}`);
}
console.log(`No area or nothing selected yet`);
}
}
<div class="row">
<div class="col-12">
<select id="pickup" placeholder="পিকআপ এলাকা নির্বাচন করুন">
<option value="">পিকআপ এলাকা.....</option>
<option value="300 Feet" data-area="1">৩০০ ফিট (300 Feet)</option>
<option value="Adabor" data-area="1">আদাবর(Adabor)</option>
<option value="Adarsha Nagar(Badda)" data-area="1">আদর্শ নগর(বাড্ডা)- Adarsha Nagar(Badda)</option>
<option value="Aftab Nagar" data-area="1">আফতাব নগর(Aftab Nagar)</option>
<option value="Aga Nagar" data-area="1">আগা নগর(Aga Nagar)</option>
<option value="Agargaon" data-area="1">আগারগাঁও(Agargaon)</option>
<option value="Ahalia-Uttara" data-area="1">আহালিয়া-উত্তরা(Ahalia-Uttara)</option>
<option value="Ahmed Nagar" data-area="1">আহমেদ নগর(Ahmed Nagar)</option>
<option value="Ainusbag" data-area="1">আইনুসবাগ(Ainusbag)</option>
<option value="Ainusbag-Dakshinkhan" data-area="1">আইনুসবাগ-দক্ষিণখান(Ainusbag-Dakshinkhan)</option>
<option value="Ajiz Market" data-area="1">আজিজ মার্কেট(Ajiz Market)</option>
<option value="Alatunnessa School Road" data-area="1">আলাতুন্নেছা স্কুল রোড(Alatunnessa School Road)</option>
<option value="Alubazar" data-area="1">আলুবাজার(Alubazar)</option>
<option value="Amin bazar" data-area="1">আমিন বাজার(Amin bazar)</option>
<option value="Apollo" data-area="1">অ্যাপোলো(Apollo)</option>
</select>
</div>
</div>
<button class="border-1 p-2 bg-danger text-white">ডেলিভারি চার্জ দেখুন</button>
</div>

Array of select field with same name and different id.

I have an array of select fields all having the same list of option value. What i am trying to get is, if a value is selected in any of the field, it should not show on the other. Below is an example code. For example, if I am having four select fields, if I select 'a' on first field, the value "a" should not appear on the next select field. Same with other values of "b", "c" and "d".
I am trying to use java script for the same. I am in learning phase. help will be really appreciated. Thanks
<select name='list' id='list_1'>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_2'>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_3'>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_4'>
<option value='d'>d</option>
</select>

Try this code that i have written .. Hope should help
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
$(document).on('change', 'select', function() {
$(this).find('option:selected').addClass('keepit');
$('option[value="' + this.value + '"]:not( .keepit)').remove();
});
https://jsfiddle.net/av46dbo1/

Since you don't want to destroy the data, you need to hide the options.
That's tricky because you have multiple state to combine.
you can make several IF comparisons, hard-code a table of combos for each group and options (yuck), or use a mountain of JS to solve this, but i think that CSS is better.
A simple way to accomplish this is to use CSS; multiple classes on a single element that translate your many states into rules that can be applied instantly and generically (without hard-coding ids or names).
<select name='list' id='list_1'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_2'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_3'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_4'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script>
var combos=[], // store the css we need to define hide/show rules
classes= new Array($("select").length); //a place to store many states
$("select").each(function(i,e){ // for every drop down,
$(this).change(function(){ // when it changes:
classes[i]=this.value; // update array with changed value in right slot
document.body.className=classes.join(" "); // update body class with array
});
});
$("select option[value]").each(function(n, a){ // make css to hide each option if body has the same class:
combos.push( "body."+a.value+" option[value='"+a.value+"'] ");
});
//append the dynamic CSS to the head:
$("head").append("<style> "+combos+"{ display: none; }</style>");
</script>
online demo: http://pagedemos.com/pe2uf5vkx9vh/
if you want to restrict this functionality to certain drop downs, give them a class like <select class=hider and change $("select to $("select.hider in the code above.
if you have values with spaces, you'll need fancier CSS selectors than class, like data-state="|a b|hello world|honda crv|" attribs that you can delimit and hit with partial attribute selectors (body[data-state*='|hello world|']...), but the same pattern can work with many and more complex states.

Fiddle
$(function(){
$('#list_1').change(function(){
var valueToRemove=$(this).val();
$('select').not('#list_1').each(function(){
var currentId=$(this).prop('id');
$("#"+currentId+" option[value="+valueToRemove+"]").remove();
})
})
})

how to push the one value to last in list of value combo box

I am having one combo box in that I need value in order by alphabetic.but problem is In that list OTHER one value need to come at last.
we can achieve this using value number arrange according to our need but it contain lot of value and using the key I did lot of process in java script so i take lot of changes to change one thing .
<select>
<option value="Select" selected="selected">Select</option>
<option value="147">Articles Of Association</option>
<option value="135">Birth Certificate</option>
<option value="132">Drivers License</option>
<option value="145">Memorandum Of Articles</option>
<option value="141">Others</option>
<option value="148">Partnership Agreement</option>
<option value="131">Passport</option>
</select>
so using script we can push the OTHER VALUE TO LAST in the list.

$("#list option").filter(function(){
return $(this).text()==='Others'
}).appendTo("#list")
http://jsfiddle.net/SxtnF/

When you have created your list, like
<select id="mycombobox">
<option value=" selected="selected">Select</option>
<option value="147">Articles Of Association</option>
<option value="135">Birth Certificate</option>
<option value="132">Drivers License</option>
<option value="145">Memorandum Of Articles</option>
<option value="141">Others</option>
<option value="148">Partnership Agreement</option>
<option value="131">Passport</option>
</select>
At last, try to add Other like
$("#mycombobox").append('<option value="other">' + Other +'</option>');
This will solve your problem. Hope this will help you out.

Html and javascript <select> tags with filtering

I will try to be as specific as I can.
So I need to create a selector that filters the options.
I have:
types of cars
The places where you can drive those cars.
So for example you would select > Ferrari > then the correct areas on the second select tag show up
I.e. Select > Ferrari = London, Cambridge, Devon, New hampshire
Select > Lamborghini = London, Bertshire, Oakwood,
And then finally
they choose (Ferrari + Cambridge) and then press "go" and jump to the final link that will take them to the right page.
My code is:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>
<script type='text/javascript'>//<![CDATA[
$('#filter-regions').on('click', function() {
var pilotage-carFilter = $('#pilotage-car').text();
var itemFilter = $('#items').text();
console.log('pilotage-carFilter: ' + pilotage-carFilter);
console.log('itemFilter : ' + itemFilter);
console.log('Applying filter now...');
featureList.filter(function(item) {
console.log('Running filter() on item: ('+item+')');
console.log('item.values().pilotage-car: ' + item.values().pilotage-car);
console.log('item.values().item: ' + item.values().item);
return
(pilotage-carFilter==='Ferrari' || item.values().pilotage-car === pilotage-carFilter)
&& (itemFilter==='All items' || item.values().item === itemFilter);
});
return false;
});
//]]>
</script>
</head>
<body>
<form id="filter">
<select id="pilotage-car" name="pilotage-car" size="1">
<option value="http://www.coolcadeau.fr/Stage-de-pilotage-Ferrari-BN-5iZ5.aspx?SqNo=5iZ5&cm_sp=LHN-_-Voiture-_-Ferrari&cm_re=Ferrari-_-Voiture-_-LHN">Ferrari</option>
<option value="Porsche">Porsche</option>
<option value="Lamborghini" selected>Lamborghini</option>
<option value="Mustang">Mustang</option>
<option value="Audi" selected>Audi</option>
<option value="Multivolants">Multivolants</option>
<option value="Rallye">Rallye</option>
<option value="Subaru">Subaru</option>
<option value="Karting">Karting</option>
<option value="4x4">4x4</option>
<option value="Moto">Moto</option>
<option value="Quad">Quad</option>
<option value="Buggy">Buggy</option>
<option value="Renault Sport">Renault Sport</option>
<option value="Prototype">Prototype</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Corvette">Corvette</option>
</select>
<select id="items" name="items" size="1">
<option value="http://www.coolcadeau.fr/Stage-de-pilotage-Ferrari-Alsace-BN-5iZ5Z1z13skq.aspx?SqNo=5iZ5Z1z13skq&cm_sp=LHN-_-Region-_-Alsace&cm_re=Alsace-_-Region">A l'étranger</option>
<option value="Alsace">Alsace</option>
<option value="Aquitaine" selected>Aquitaine</option>
<option value="Auvergne">Auvergne</option>
<option value="Basse-Normandie" selected>Basse-Normandie</option>
<option value="Bourgogne">Bourgogne</option>
<option value="Bretagne">Bretagne</option>
<option value="Centre">Centre</option>
<option value="Champagne-Ardenne">Champagne-Ardenne</option>
<option value="Franche-Comté">Franche-Comté</option>
<option value="Haute-Normandie">Haute-Normandie</option>
<option value="Ile-de-France">Ile-de-France</option>
<option value="Languedoc-Roussillon">Languedoc-Roussillon</option>
<option value="Limousin">Limousin</option>
<option value="Lorraine">Lorraine</option>
<option value="Midi-Pyrénées">Midi-Pyrénées</option>
<option value="Nord-Pas-de-Calais">Nord-Pas-de-Calais</option>
<option value="Pays de la Loire">Pays de la Loire</option>
<option value="Picardie">Picardie</option>
<option value="Poitou-Charentes">Poitou-Charentes</option>
<option value="Provence-Alpes-Côte d'Azur">Provence-Alpes-Côte d'Azur</option>
<option value="Rhône-Alpes">Rhône-Alpes</option>
</select>
<input id="go-button" type="button" name="test" value="Go"/>
</form>
Im really not sure about javascript at all.
How could I, and/or what is the best way I could achieve this? Are there any examples out there?
EDIT: I found something like this http://jsfiddle.net/dtAgX/1/
But i need a sumbit button that will link to the right page based on selection.
Thanks in advance

You have several options depending on your backend, PHP, ASP ect. or plain HTML.
If you use PHP/ASP you can provide an 'action' and a 'method' for your and have the server provide the correct page, depending on the values of your selects.
If you use plain HTML, you can add an 'onsubmit' event to your and have a javascript redirect to the correct page.
In both cases the "go-button" should be of type "submit".
If you want more help I'll need to know more about your setup :-)
Also, can all cars be driven at all locations?

Dynamically change selectbox options based on previous option selection

What I am trying to accomplish is the following...
HTML
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link href="css/jquery.selectbox.css" type="text/css" rel="stylesheet" />
</head>
<body>
<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
<option value="">--Select Date--</option>
<option value="1">2012</option>
<option value="1">2011</option>
<option value="1">2010</option>
<option value="2">Predefined Dates</option>
</select>
<select name="dateselector_child" id="dateselector_child" tabindex="2">
<option value="">--Select Date--</option>
<option value="1">January</option>
<option value="1">February</option>
<option value="1">March</option>
<option value="1">April</option>
<option value="1">May</option>
<option value="1">June</option>
<option value="1">July</option>
<option value="1">August</option>
<option value="1">September</option>
<option value="1">October</option>
<option value="1">November</option>
<option value="1">December</option>
<option value="2">Current Month</option>
<option value="2">Month to Date</option>
<option value="2">Last 7 Days</option>
</select>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.selectbox-0.2.js"></script>
<script type="text/javascript" src="js/datejs.js"></script>
<script type="text/javascript">
$(function () {
$("#dateselector_parent").selectbox();
$("#dateselector_child").selectbox();
});
</script>
</body>
This creates two select boxes, I want one box to display content according to what the user chooses on the other one. For example, if the user chooses, 2010 or 2011 or 2012, I want to display Jan-Dec as options on the second one. If the user chooses, Predefined Dates, I want to display Current Month, Month to Date, and Last 7 Days. The javascript plugin I'm using allows the user to define the onChange, onOpen, and onClose methods. I have been doing some research and it appears that AJAX is involved in trying to accomplish this, but since I don't know one bit of PHP I would like to know if it's possible to accomplish this with jQuery. (I have attempted to solve this problem with no luck of course, I am not looking for someone to do it for me, I just want to be pointed in the right direction, whether I can accomplish this with jQuery or if it's necessary to use AJAX since I haven't seen an example online with only jQuery).
Any help will be appreciated

I hope the following work for your requirement. Having 3 child dropdowns (no divs) 1. --Select--, 2. Jan-Dec 3.Other options
$().ready(function () {
var selectedOnLoad = $('#dateselector_parent').val();
setChild(selectedOnLoad);
$('#dateselector_parent').change(function () {
var selectedValue = $('#dateselector_parent').val();
setChild(selectedValue);
});
});
function setChild(value){
//Have your three child selector names as follows in your markup as well and assuming they are not in divs
var arr = [ "dateselector_child_", "dateselector_child_1", "dateselector_child_2"];
jQuery.each(arr, function() {
if(this == "dateselector_child_" + value){
$("#" + this).show();
}else{
$("#" + this).hide();
}
});
}
UPDATE: Adding markup for the above script
<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
<option value="">--Select Date--</option>
<option value="1">2012</option>
<option value="1">2011</option>
<option value="1">2010</option>
<option value="2">Predefined Dates</option>
</select>
<select name="dateselector_child_" id="dateselector_child_" tabindex="2">
<option value="">--Select Date--</option>
</select>
<select name="dateselector_child_1" id="dateselector_child_1" tabindex="2">
<option value="">--Select Date--</option>
<option value="1">January</option>
<option value="1">February</option>
<option value="1">March</option>
<option value="1">April</option>
<option value="1">May</option>
<option value="1">June</option>
<option value="1">July</option>
<option value="1">August</option>
<option value="1">September</option>
<option value="1">October</option>
<option value="1">November</option>
<option value="1">December</option>
</select>
<select name="dateselector_child_2" id="dateselector_child_2" tabindex="2">
<option value="">--Select Date--</option>
<option value="2">Current Month</option>
<option value="2">Month to Date</option>
<option value="2">Last 7 Days</option>
</select>
Check the setChild(value) function. Parent's selected value is passing to that function when page is ready (just after loading) and also when user change the selection. Parent's selected value could be "","1","2". Next the foreach loop finds the name of the child that needs to show and others are hidden. if user select ---Select--- option of the parent then that function will show "dateselector_child_" and others two hidden.
Hope it's clear now....

Just a startingpoint!
$("#dateselector_parent").change(function() {
$('#dateselector_child').val($(this).find("option:selected").index());
});
Demo

AJAX, expands to Asynchronous JavaScript And XML. It involves writing an XMLHTTPRequest to retrieve the contents from a server.
If you can store your logic (what to display when a certain option is chosen) in a few lines of code, you can embed it in JavaScript or jQuery.
So, in your case, it is not necessary to use AJAX. You can accomplish this with a bit of code in JavaScript.
"Creating a 2 level interdependent select list" might help.