Below are the dropdown data..
<select size="1" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
I want to get alert/pop up when I select the data which is start from IN in drop down list.
Try this:
https://jsfiddle.net/mminetto/bggwnkwj/
var select = $('select[name="Test_Data"]');
select.on('change', function(){
var options = select.children('option:selected');
if(options.length > 0 && options[0].innerText.startsWith("IN")){
alert(this.value);
alert(options[0].innerText);
}
});
<select size="1" name="Test_Data" id="dropdown">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
in javascript
<script>
$("#dropdown").change(function(){
if($(this).find("option:selected").text().startsWith("IN")){
alert("option with IN selected =>"+$(this).find("option:selected").text());
}
});
</script>
Try this code
HTML
<select size="1" onChange="showAlert()" id="dataCountry" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
</select>
JavaScript
<script>
function showAlert() {
var el = document.getElementById('dataCountry'); // get the index
var text = el.options[el.selectedIndex].innerHTML; // get the label
var n = text.search("IN"); //search number of IN
if(n>=0) {
alert(text);
}
}
</script>
Related
I have below select tag
<select id="subCategorySelected">
<option value="Select Sub Category">Select Sub Category</option>
<option value=""></option>
<option value="subcat1">sub cat 1</option>
<option value="subcat2">sub cat 2</option>
<option value=""></option>
<option value="subcat4">sub cat 4</option>
<option value=""></option>
</select>
I need to filter items in the tag and remove all duplicate elements in below way
<select id="subCategorySelected">
<option value="Select Sub Category">Select Sub Category</option>
<option value=""></option>
<option value="subcat1">sub cat 1</option>
<option value="subcat2">sub cat 2</option>
<option value="subcat4">sub cat 4</option>
</select>
I have tried in below ways as suggested in some other question but both are not working
1)
var map = {};
$('#subCategorySelected').each(function () {
if (map[this.value]) {
$(this).remove()
}
map[this.value] = true;
})
2)
$("#subCategorySelected").val(function(idx, val) {
$(this).siblings('[value="'+ val +'"]').remove();
});
Thanks in advance
Check this out
$(document).ready(function(){
$('#subCategorySelected option').each(function(index,val){
var value=$(this).val();
$(this).siblings('[value="'+ value +'"]').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="subCategorySelected">
<option value="Select Sub Category">Select Sub Category</option>
<option value=""></option>
<option value="subcat1">sub cat 1</option>
<option value="subcat2">sub cat 2</option>
<option value=""></option>
<option value="subcat4">sub cat 4</option>
<option value=""></option>
</select>
If you know the only duplicates are empty values you could just do:
$("#subCategorySelected option[value='']").slice(1).remove();
otherwise your first method works, just change the selector to:
$("#subCategorySelected option")
I'm setting up a new form on my site, and I'm using some code I found here (Vehicle drop down selector). However, I'm using this code within a form, and once the form is submitted, the values for make/model aren't changed to their respective names, instead showing their form values. Being a complete JS noob, how would I go about changing the values submitted from values to make/model names?
$(document).ready(function() {
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$make.on('change', function() {
$model.html($options.filter('[value="' + this.value + '"]'));
$model.trigger('change');
}).trigger('change');
var $model = $('#model'),
$year = $('#year'),
$yearOptions = $year.find('option');
$model.on('change', function() {
$year.html($yearOptions.filter('[value="' + this.value + '"]'));
$year.trigger('change');
}).trigger('change');
var $year = $('#year'),
$identifier = $('#identifier'),
$identifierOptions = $identifier.find('option');
$year.on('change', function() {
var filteredIdetifiers = $identifierOptions.filter('[value="' + this.value + '"]');
debugger
if (!($("#make").val() == 3 && $("#model option:selected").text() == 'Falcon')) {
filteredIdetifiers = filteredIdetifiers.filter(function(i, e) {
return e.value !== '3'
});
}
$identifier.html(filteredIdetifiers);
$identifier.trigger('change');
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Vehicle Brand Selector List -->
<select name="make" id="make">
<option value="0">Make</option>
<option value="1">BMW</option>
<option value="2">Daewoo</option>
<option value="3">Ford</option>
<option value="4">Holden</option>
<option value="5">Honda</option>
<option value="6">Hyundai</option>
<option value="7">Isuzu</option>
<option value="8">Kia</option>
<option value="9">Lexus</option>
<option value="10">Mazda</option>
<option value="11">Mitsubishi</option>
<option value="12">Nissan</option>
<option value="13">Peugeot</option>
<option value="14">Subaru</option>
<option value="15">Suzuki</option>
<option value="16">Toyota</option>
<option value="17">Volkswagen</option>
</select>
<!-- Vehicle Model List -->
<select name="model" id="model">
<option value="0">Model</option>
<option class="318i" value="1">318i</option>
<option class="lanos" value="2">Lanos</option>
<option class="courier" value="3">Courier</option>
<option class="falcon" value="3">Falcon</option>
<option class="festiva" value="3">Festiva</option>
<option class="fiesta" value="3">Fiesta</option>
<option class="focus" value="3">Focus</option>
<option class="laser" value="3">Laser</option>
<option class="ranger" value="3">Ranger</option>
<option class="territory" value="3">Territory</option>
<option class="astra" value="4">Astra</option>
<option class="barina" value="4">Barina</option>
<option class="captiva" value="4">Captiva</option>
<option class="colorado" value="4">Colorado</option>
<option class="commodore" value="4">Commodore</option>
<option class="cruze" value="4">Cruze</option>
<option class="rodeo" value="4">Rodeo</option>
<option class="viva" value="4">Viva</option>
</select>
<!-- Vehicle Year List -->
<select name="year" id="year">
<option value="0">Year</option>
<option value="1">1998</option>
<option value="1">1999</option>
<option value="1">2000</option>
<option value="1">2001</option>
<option value="1">2002</option>
<option value="1">2003</option>
<option value="1">2004</option>
<option value="1">2005</option>
<option value="2">1997</option>
<option value="2">1998</option>
<option value="2">1999</option>
<option value="2">2000</option>
<option value="2">2001</option>
<option value="2">2002</option>
<option value="2">2003</option>
<option value="3">1991-1999</option>
<option value="4">1997-2007</option>
<option value="5">1997-2007</option>
<option value="3">2002</option>
<option value="3">2003</option>
<option value="3">2004</option>
<option value="3">2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
</select>
<!-- Vehicle Identity List -->
<select name="identifier" id="identifier">
<option value="0">Type</option>
<option class="E46" value="1">E46</option>
<option class="1997-2003" value="2">N/A</option>
<option class="1997-2007" value="4">N/A</option>
<option class="1997-2007" value="5">N/A</option>
<option class="5041618" value="3">BA</option>
<option class="1997-2005" value="3">AU</option>
<option class="1997-2005" value="3">AU2</option>
<option class="1997-2005" value="4">N/A</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
</select>
In every <option> tag there is an attribute called value. This value attribute is what is returned at as the value of the dropdown when that option is selected. Seems like in the code you found they are all simply set to numbers. You can set them to be whatever you want though:
<option value="Ford">Ford</option>
<option class="focus" value="Focus">Focus</option>
FIXING DYNAMIC OPTIONS
I see that modifying the values directly affect how the dynamic options are displayed. For example the value attribute of the car model dropdown is used to filter the car make dropdown by only displaying options with the same value. Instead of using the model dropdown's value attributes to compare with make, we can add a new data- attribute called data-make and filter the model dropdown based on that instead. This allows you to freely modify the value attribute in model. The example code below shows this. You would need to modify your JS so model affects year, and year affects identifier in the same way.
$(document).ready(function() {
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$make.on('change', function() {
// We now filter model using the data-make attribute, not value
$model.html($options.filter('[data-make="' + this.value + '"]'));
$model.trigger('change');
}).trigger('change');
$('#carForm').submit(function(e) {
e.preventDefault();
let formData = $(this).serializeArray();
let data = {};
for (let i = 0; i < formData.length; i++) {
data[formData[i].name] = formData[i].value;
}
alert('Make: ' + data.make + '\nModel: ' + data.model);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="carForm">
<select name="make" id="make">
<option value="0">Make</option>
<option value="BMW">BMW</option> <!-- These values are now make names -->
<option value="Daewoo">Daewoo</option>
<option value="Ford">Ford</option>
</select>
<!-- Vehicle Model List -->
<!-- Notice the new "data-make" attributes for each -->
<select name="model" id="model">
<option value="0">Model</option>
<option class="318i" value="318i" data-make="BMW">318i</option>
<option class="lanos" value="Lanos" data-make="Daewoo">Lanos</option>
<option class="courier" value="Courier" data-make="Ford">Courier</option>
<option class="falcon" value="Falcon" data-make="Ford">Falcon</option>
<option class="festiva" value="Festiva" data-make="Ford">Festiva</option>
<option class="fiesta" value="Fiesta" data-make="Ford">Fiesta</option>
<option class="focus" value="Focus" data-make="Ford">Focus</option>
</select>
<button type="submit">Submit</button>
</form>
You can get the selected option text like this.
$('#form').submit(function(e) {
e.preventDefault();
var make = $make.find(':selected').text();
}
But it would be good practice to set the value you expect to return as the option value and use a data attribute or class to handle the filtering logic.
I have a dropdown menu with all options disabled except the first one which has no value (just a label). How can i check on $(document).ready(function() if all options of this dropdown option are disabled (except the first option which has no value) and if so show an alert for example alert ('All Options Disabled');.
<!DOCTYPE html>
<html>
<body>
<select id="selectId">
<option value="">Select a Car</option>
<option value="volvo"disabled>Volvo</option>
<option value="saab"disabled>Saab</option>
<option value="opel"disabled>Opel</option>
<option value="audi" disabled>Audi</option>
</select>
</body>
</html>
Iterate over the options and check to see if every option is either disabled or whose value property is the empty string:
const allDisabled = Array.prototype.every.call(
document.querySelector('#selectId > option')
option => option.disabled || option.value === ''
);
console.log(allDisabled);
<select id="selectId">
<option value="">Select a Car</option>
<option value="volvo"disabled>Volvo</option>
<option value="saab"disabled>Saab</option>
<option value="opel"disabled>Opel</option>
<option value="audi" disabled>Audi</option>
</select>
Or, with jQuery and each:
let allDisabled = true;
$('#selectId > option').each(function() {
const $this = $(this);
if (!$this.prop('disabled') && $this.prop('value')) allDisabled = false;
});
console.log(allDisabled);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectId">
<option value="">Select a Car</option>
<option value="volvo"disabled>Volvo</option>
<option value="saab"disabled>Saab</option>
<option value="opel"disabled>Opel</option>
<option value="audi" disabled>Audi</option>
</select>
I have two <select> elements with different IDs.
When the user selects a value from the first select box, I want the second select box to only display connected values.
My code:
<select id="ExtraField_1" name="ExtraField_1">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
</select>
<select id="ExtraField_2" name="ExtraField_2">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
<option value="13">test13</option>
<option value="14">test14</option>
<option value="15">test15</option>
<option value="16">test16</option>
<option value="17">test17</option>
<option value="18">test18</option>
<option value="19">test19</option>
<option value="20">test20</option>
</select>
So when user selects "test1" from first select boxm he will see only "test2", "test3" and "test4" on the second select box; "test2" from first will show "test6", "test7" and "test8" in the second box.
How can I use JavaScript to resolve this problem?
If you can use jQuery then you can always just clear and append the options to the second select.
$('#ExtraField_1').change(function(){
$('#ExtraField_2').find('option').remove()
if($(this).val() == '1'){
$('#ExtraField_2').append($("<option </option>").attr('value','2').text('test2'));
$('#ExtraField_2').append($("<option></option>").attr('value','3').text('test3'));
$('#ExtraField_2').append($("<option></option>").attr('value','4').text('test4'));
}
if($(this).val() == '2'){
$('#ExtraField_2').append($("<option></option>").attr('value','5').text('test5'));
$('#ExtraField_2').append($("<option></option>").attr('value','6').text('test6'));
$('#ExtraField_2').append($("<option></option>").attr('value','7').text('test7'));
}
});
http://jsfiddle.net/8XVuv/2/
using only javascript is a bit more complicated but I would still take the same approach.
function createOption(otext,oValue){
var newOption = document.createElement('option');
newOption.text = otext;
newOption.value = oValue;
return newOption;
}
function clearSelect(theSelect){
for(var i = 0;i <= theSelect.options.length+1;i++)
{
theSelect.remove();
}
}
function onSelect(theSelect){
var nextSelect = document.getElementById('ExtraField_2');
clearSelect(nextSelect);
var selected = theSelect.options[theSelect.selectedIndex];
if(selected.value == 1){
nextSelect.add(createOption('test2','2'));
nextSelect.add(createOption('test3','3'));
nextSelect.add(createOption('test4','4'));
}
if(selected.value == 2){
nextSelect.add(createOption('test5','5'));
nextSelect.add(createOption('test6','6'));
nextSelect.add(createOption('test7','7'));
}
}
with html:
<select id="ExtraField_1" name="ExtraField_1" onchange="javascript: onSelect(this);" >
<option value="0">Select a test..</option>
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
</select>
<select id="ExtraField_2" name="ExtraField_2">
<option value="0">Select from the left</option>
</select>
as you can see it still does what you expect but you are not hiding options.
http://jsfiddle.net/upKzW/13/
$('#ExtraField_1').change(function() {
$('#ExtraField_2').val(this.value);
});
http://jsfiddle.net/judearasu/rF8G6/
I am not really a web person and am having trouble creating a cascading combo box. I have my options, but when I cannot figure out how to do a JavaScript command to switch the second box depending on the first box's selection.
These are my first set of options:
<select id="searchType" onchange="selectedOption(this)">
<option value="sessions">Sessions</option>
<option value="files">Files</option>
<option value="clients">Clients</option>
</select>
Depending on what they click there I would like to show these set of options:
SESSIONS
<select id="secondOptions">
<option value="conf">Config ID</option>
<option value="length">Length</option>
<option value="date">Date</option>
</select>
FILES
<select id="secondOptions">
<option value="id">File ID</option>
<option value="length">Length</option>
<option value="sent">Sent</option>
<option value="sessionId">Session ID</option>
</select>
CLIENTS
<select id="secondOptions">
<option value="name">Client Name</option>
<option value="organization">Organization</option>
<option value="specialty">Specialty</option>
<option value="sessionId">Session ID</option>
</select>
And finally a textbox to type into to really specify the search.
Once again, I am trying to do this using JavaScript, but if there is a better way to do this let me know please.
Given the amended html mark-up:
<form action="#" method="post">
<select id="searchType">
<option value="sessions">Sessions</option>
<option value="files">Files</option>
<option value="clients">Clients</option>
</select>
<select id="sessions">
<option value="conf">Config ID</option>
<option value="length">Length</option>
<option value="date">Date</option>
</select>
<select id="files">
<option value="id">File ID</option>
<option value="length">Length</option>
<option value="sent">Sent</option>
<option value="sessionId">Session ID</option>
</select>
<select id="clients">
<option value="name">Client Name</option>
<option value="organization">Organization</option>
<option value="specialty">Specialty</option>
<option value="sessionId">Session ID</option>
</select>
<fieldset id="textAreaSearchBox">
<legend>Search:</legend>
<textarea></textarea>
</fieldset>
</form>
(Note the changed ids, wrapping the form elements in a form, the addition of a fieldset, legend and textarea in the mark-up), the following JavaScript seems to work:
var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');
select1.onchange = function() {
var select2 = this.value.toLowerCase();
for (i = 0; i < selects.length; i++) {
if (selects[i].id != this.id) {
selects[i].style.display = 'none';
}
}
document.getElementById(select2).style.display = 'block';
document.getElementById('textAreaSearchBox').style.display = 'block';
};
JS Fiddle demo.