HTML drop down javascript help needed

HTML drop down javascript help needed - javascript

I have two HTML drop down
<select>
<option value="">Please Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="">Please Select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
Now, If I Select volvo from first drop down and b from second dropdown and then I change to Audi in the first dropdown, I want the value of second drop down to show Please Select instead of b (selected previously) using javascript
PS: I am new to Javascript

It's as easy as:
<select onChange="document.getElementById('secondOption').selectedIndex = 0;">
<option value="">Please Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="secondOption">
<option value="">Please Select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>

You can reset the index supposing you've two <select>
var selects = document.getElementsByTagName('select');
selects[0].onchange = function(){
selects[1].selectedIndex = 0;
}

Related

How to make two level select option category and subcategory?

I need help with the following:
How to make two level select option. category and subcategory with JavaScript?
<select id="category" required>
<option value="">select model type</option>
<option class="Volvo" value="1">Volvo</option>
<option class="Saab" value="2">Saab</option>
<option class="Opel" value="3">Opel</option>
<option class="Audi" value="4">Audi</option>
</select>
<select id="subcategory">
<optgroup class="Volvo" required>
<option value="">select model type</option>
<option value="44">XC60</option>
<option value="55">XC90</option>
</optgroup>
<optgroup class="Saab" required>
<option value="">select model type</option>
<option value="66">Saab 9XX</option>
<option value="77">Saab Aero-X</option>
</optgroup>
<optgroup class="Opel" required>
<option value="">select model type</option>
<option value="88">Corsa A</option>
<option value="99">Corsa B</option>
</optgroup>
<optgroup class="Audi" required>
<option value="">select model type</option>
<option value="616">Audi A4</option>
<option value="717">Audi A8</option>
</optgroup>
</select>
I need make two level select option with javascript or jquery I don't know how JavaScript works and I need help.

You can do it like this:
$('#subcategory').find('optgroup').hide(); // initialize
$('#category').change(function() {
var $cat = $(this).find('option:selected');
var $subCat = $('#subcategory').find('.' + $cat.attr('class'));
$('#subcategory').find('optgroup').not("'" + '.' + $cat.attr('class') + "'").hide(); // hide other optgroup
$subCat.show();
$subCat.find('option').first().attr('selected', 'selected');
});
Online demo(jsFiddle)

Two Level selectoption AKA Multilevel dropdowns can designed using HTML,CSS.
Based on the functional requirements, Javascript can be used for implementing additional features in Multilevel dropdowns.
Multilevel dropdowns can be designed by making use of <div> tags or <ul> tags .
i Personally prefer <ul> tags
Take a look at my codepen (https://codepen.io/Divine1/pen/mXVPmQ) to have an understanding on how to start designing multi-level dropdown.

Check it out:
var el = document.getElementById('category');
el.onchange = function(){
var category = $('#category :selected').attr('class');
$('#subcategory optgroup').hide();
$('#subcategory').val("");
$('#subcategory .'+category).show();
}
#subcategory optgroup{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category" required>
<option value="">select model type</option>
<option class="Volvo" value="1">Volvo</option>
<option class="Saab" value="2">Saab</option>
<option class="Opel" value="3">Opel</option>
<option class="Audi" value="4">Audi</option>
</select>
<select id="subcategory">
<optgroup class="Volvo" required>
<option value="">select model type</option>
<option value="44">XC60</option>
<option value="55">XC90</option>
</optgroup>
<optgroup class="Saab" required>
<option value="">select model type</option>
<option value="66">Saab 9XX</option>
<option value="77">Saab Aero-X</option>
</optgroup>
<optgroup class="Opel" required>
<option value="">select model type</option>
<option value="88">Corsa A</option>
<option value="99">Corsa B</option>
</optgroup>
<optgroup class="Audi" required>
<option value="">select model type</option>
<option value="616">Audi A4</option>
<option value="717">Audi A8</option>
</optgroup>
</select>

How to make multi level dropdown menu using select option mentod

i want to make multi level dropdown menu using select and option method
<select>
<option value="" data-display-text="Select">None</option>
<option value="oranges">SSC</option>
<option value="oranges">GATE</option>
<option value="bananas">BANK PO</option>
<option value="bananas">RAILWAY</option>
</select>

As far as I understand from your "multi level dropdown" concept, you can make a simple dropdown and just move some elements with CSS. Category name is stored in optgroup.
<select name="select_projects" id="select_projects">
<option value="">project.xml</option>
<optgroup label="client1">
<option value="">project2.xml</option>
</optgroup>
<optgroup label="client2">
<option value="">project5.xml</option>
<option value="">project6.xml</option>
<optgroup label="client2_a">
<option value="" style="margin-left:23px;">project7.xml</option>
<option value="" style="margin-left:23px;">project8.xml</option>
</optgroup>
<option value="">project3.xml</option>
<option value="">project4.xml</option>
</optgroup>
<option value="">project0.xml</option>
<option value="">project1.xml</option>
</select>
Update:
Or if you are trying to make a "chain" of dropdowns like you have in start menu in Windows, that is the easiest way to do it:
https://jqueryui.com/menu/

You can't make multiple levels with the select element.
In this case you would create a custom component with the capability to display something like 'hierarchic'.
Or use the trick like this:
<select>
<option>select me</option>
<option> me indented</option>
<option> even more indentation</option>
</select>

If you want to use ONE select you could use <optgroup/>. See example.
Note: it's not very multi-level, but it allows for some kind of relevant grouping.
<select>
<option value="" selected="selected">Select an option...</option>
<optgroup label="SSC">
<option value="oranges1">some option</option>
<option value="oranges2">some option</option>
<option value="oranges3">some option</option>
</optgroup>
<optgroup label="GATE">
<option value="bananas1">some option</option>
<option value="bananas2">some option</option>
<option value="bananas3">some option</option>
</optgroup>
<optgroup label="BANK PO">
<option value="apples1">some option</option>
<option value="apples2">some option</option>
<option value="apples3">some option</option>
</optgroup>
<optgroup label="RAILWAY">
<option value="grapes1">some option</option>
<option value="grapes2">some option</option>
<option value="grapes3">some option</option>
</optgroup>
</select>

You can't make multiple levels with the select element.
Any ways, if its any help, there's
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Maybe this can insprire you even if not totally correctly interpreted by editors.
<div class="col-2 search-filter">
<select id="searchByYear" multiple="multiple" ng-model="varYear.value">
<option value="2023">2023
<option value="2023-H1">H1</option>
<option value="2023-H2">H2</option>
</option>
<option value="2022">2022
<option value="2022-H1">H1</option>
<option value="2022-H2">H2</option>
</option>
<option value="2021">2021
<option value="2021-H1">H1</option>
<option value="2021-H2">H2</option>
</option>
<option value="2020">2020
<option value="2020-H1">H1</option>
<option value="2020-H2">H2</option>
</option>
<option value="2019">2019
<option value="2019-H1" >H1</option>
<option value="2019-H2" >H2</option>
</option>
</select>
</div>

More than one dropdown for same functionality on same page

My question is how can I display more than one drop downs on same page for same functionality in C#. Let's say I have 3 panels on a page, I want to show a drop down in all three panels but changing the value of one drop down will cause changing the values of others too.
I can't use id access in JS because if there are 3 drop downs on same page of same ID i.e ID is not unique then Java Script can't perform actions.

Just apply same class to all dropdowns and on change of any of dropdown set that value to all dropdowns please find snippet below.
$(".selectclass").on("change",function(){
$(".selectclass").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectclass">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class="selectclass">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class="selectclass">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

You can assign different Class all three dropdown and call change event
<select id="ddlUnquie" class="one" >
<option value="firstvalue">first dropdown text</option>
<option value="firstsecond">first second text</option>
</select>
<br>
<br>
<select id="ddlUnquie" class="two" >
<option value="firstvalue">first dropdown text</option>
<option value="firstsecond">first second text</option>
</select>
<br>
<br>
<select id="ddlUnquie" class="three" >
<option value="firstvalue">first dropdown text</option>
<option value="firstsecond">first second text</option>
</select>
Below is Jquery code
$(".one").change(function()
{
alert($(this).val());
})
$(".two").change(function()
{
alert($(this).val());
})
$(".three").change(function()
{
alert($(this).val());
})
Also you can use jsfillde link https://jsfiddle.net/1xzkmbtk/

How to delete the selected option using title attribute of select tag

I want to delete the first option of the selected and I have selected tag id and class but the problem is selected class and id is changing when I open the form of different-2 event.and class "r" of selected tag is using more than one time different-3 drop down of form.
I want to remove the selected option using title attribute of selected tag.
If any other way to resolved this type of problem please share.
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
I want to delete
<option value="">Select One </option>

Here is how to select using class and title in plain JavaScript
window.onload=function() {
var sel = document.querySelector("select.r[title='State*']");
console.log(sel);
sel.options[0]=null;
}
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option>Please select State</option>
<option>option 1</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="NotState*">
<option>Please select Not State</option>
<option>option 1</option>
</select>
Ditto in jQuery
$(function() {
var $options = $("select.r[title='State*'] option");
$options.eq(0).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option>Please select State</option>
<option>option 1</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="NotState*">
<option>Please select Not State</option>
<option>option 1</option>
</select>

you can add the hidden attribute:
<option value="" hidden>Select One</option>
this will result in being the default selected value but you can't select it in the dropdown
Example:
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="" hidden>Select One</option>
<option value="Michigan">Michigan</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
</select>
The hidden attribute can also be used to keep a user from seeing an element until some other condition has been met (like selecting a checkbox, etc.).
The hidden attribute is new in HTML5.
Source: http://www.w3schools.com/tags/att_global_hidden.asp

In your scenario if select box's id is changing dynamically then you can achieve this with it's class name like below
$(".r option[value='']").each(function() {
$(this).remove();
});
If you want to delete it by using ID then you can do it like this..
$("#DROPDOWN_735 option[value='']").each(function() {
$(this).remove();
});
Or
$("select option[value='']").each(function() {
$(this).remove();
});

Try this
$(document).ready(function() {
$("select[title='State*'] option:first-child[value='']").remove();
})
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
Hope it will be useful.

How to enable/disable drop down list box in HTML + Javascript/JQuery?

I have 2 drop down lists of pairs of name IMEI's and cities, as following:
<HTML>
<body>
Select Programming font:
<select name="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name ="city">
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
</body>
</html>
The desired behavior is: when one selects a city name, the IMEI list enables; otherwise it is disabled.
How can I achieve this?
Thanks in advance!

Fiddle Demo
$(function () {
var sel_imie = $('select[name="IMEI"]');
sel_imei.prop('disabled', true); //disable IMEI select
$('select[name ="city"]').change(function () {
sel_imei.prop('disabled', false); //enable when value of city select is changed
});
});
.change()

Try this,
<select name="IMEI" disabled="disabled" id="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name ="city" id="city">
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
Script
$('#city').on('change',function(){
$('#IMEI').attr('disabled',false);
});
Demo:http://jsfiddle.net/khmSm/

Select Programming font:
<select name="IMEI" disabled="disabled">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name="city">
<option value="">Select...</option>
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
document.getElementsByName('city')[0].addEventListener('change', function(e){
var imei = document.getElementsByName('IMEI')[0];
var city = e.target;
imei.disabled = city.value != '' ? '' : 'disabled';
});

try this way
HTML CODE:
CITY :<select name="city">
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
<br/>
IMEI :<select name="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
JQUERY CODE:
$('select[name=IMEI]').prop('disabled',true);
$('select[name=city]').on('change',function () {
$('select[name=IMEI]').prop('disabled',false);
});
LIVE DEMO:
http://jsfiddle.net/dreamweiver/TvpRF/7/
Happy Coding :)

<select name="IMEI" disabled="disabled" id="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name ="city" id="city">
<option value ="choose">Choose a city</option>
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
Here is the link : http://jsfiddle.net/khmSm/1/

Disable select and update the plugin. Use trigger chosen:updated to disable the select widget.
$('#RefundType').prop('disabled', true).trigger("chosen:updated");

Develop Reference

JavaScript is the programming language of the Web.

HTML drop down javascript help needed - javascript

You can reset the index supposing you've two <select> var selects = document.getElementsByTagName('select'); selects[0].onchange = function(){ selects[1].selectedIndex = 0; }

Related

How to make two level select option category and subcategory?

How to make multi level dropdown menu using select option mentod

More than one dropdown for same functionality on same page

How to delete the selected option using title attribute of select tag

How to enable/disable drop down list box in HTML + Javascript/JQuery?

Categories

Resources