More than one dropdown for same functionality on same page - javascript

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/

Related

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.

Connected select tags

I'm have several select tags on one page, grouped 3 by 3.
And I want every group by 3 to share the same option list, where if the user chooses "Sweden" in the first box, then "Sweden" is removed from the options of the second box. But here is the tricky part, IF the user decides to change the first box again to lets say "England", then "Sweden" will be back in the list of the second select box. Sounds fuzzy?
My code manages to remove a country from the next box but then it is removed for good, also the change is only affecting the closest Select tag right now. I would like to change the content for all 4 select tags in that group.
Here is my code, please point me in the right direction:
<div id="group1">
<div>
<select>
<option value="France">France</option>
<option value="Sweden">Sweden</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<select>
<option value="France">France</option>
<option value="Sweden">Sweden</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<select>
<option value="France">France</option>
<option value="Sweden">Sweden</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
<option value="USA">USA</option>
</select>
</div>
</div>
<div id="group2">
<div>
<select>
<option value="France">France</option>
<option value="Sweden">Sweden</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<select>
<option value="France">France</option>
<option value="Sweden">Sweden</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<select>
<option value="France">France</option>
<option value="Sweden">Sweden</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
<option value="USA">USA</option>
</select>
</div>
</div>
$("select").change(function(){
var value = $(this).val();
$(this).closest('div').next('div').find("option").removeClass('hide');
$(this).closest('div').next('div').find("option[value='"+value+"']").addClass('hide');
});
UPDATED:
JSFiddle
add one class in your css
.hide{display:none;}
after that update your script function
$(this).closest('div').next('div').find("option").removeClass('hide');
$(this).closest('div').next('div').find("option[value='"+value+"']").addClass('hide');
In your code , you remove the element from the DOM using .remove()
if you need that element again you save that element in DOM.
I hope it will help you.

HTML drop down javascript help needed

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;
}

How to stop select box to use select2 plugin

i have many dropdowns in my page.
for dropdowns i am using select2 plugin.
i don't want to use select2 plugin for some of the dropdowns.
is there any way to do so?
i have searched on google and also have gone through their documentation but i didn't get anything related this.
this is my select box code ..
<div class="cust-input">
<select name="management[]">
<option value="0">Select Management</option>
<option value="Chairman">Chairman</option>
<option value="Vice Chairman">Vice Chairman</option>
<option value="Vice Chancellor">Vice Chancellor</option>
<option value="Secretary">Secretary</option>
<option value="Registrar">Registrar</option>
<option value="Dean">Dean</option>
<option value="Owner">Owner</option>
<option value="Other">Other</option>
</select>
</div>
You can implement that using specific class instead of common select tag element.
use:
$(".useSelect2").select2(); //either your desired name of your class or unique ID
instead of
$("select").select2(); // if you used this method, select2 will applied to all dropdowns.
Example:
<select name="management[]" class="useSelect2">
<option value="0">Select Management</option>
<option value="Chairman">Chairman</option>
<option value="Vice Chairman">Vice Chairman</option>
<option value="Vice Chancellor">Vice Chancellor</option>
<option value="Secretary">Secretary</option>
<option value="Registrar">Registrar</option>
<option value="Dean">Dean</option>
<option value="Owner">Owner</option>
<option value="Other">Other</option>
</select>
Javascript:
$(".useSelect2").select2();
Other dropdowns:
<select name="management[]" class="dontuseSelect2">
<option value="0">Select Management</option>
<option value="Chairman">Chairman</option>
<option value="Vice Chairman">Vice Chairman</option>
<option value="Vice Chancellor">Vice Chancellor</option>
<option value="Secretary">Secretary</option>
<option value="Registrar">Registrar</option>
<option value="Dean">Dean</option>
<option value="Owner">Owner</option>
<option value="Other">Other</option>
</select>
Put a class on the select elements you want to use select2 with, and then use that class to instantiate the plugin. Something like this:
$('.select2').select2();
<div class="cust-input">
<select name="management[]" class="select2">
<option value="0">Select Management</option>
<option value="Chairman">Chairman</option>
<option value="Vice Chairman">Vice Chairman</option>
<option value="Vice Chancellor">Vice Chancellor</option>
<option value="Secretary">Secretary</option>
<option value="Registrar">Registrar</option>
<option value="Dean">Dean</option>
<option value="Owner">Owner</option>
<option value="Other">Other</option>
</select>
<!-- this select will not be styled -->
<select>
<option>Foo</option>
<option>Bar</option>
</select>

drop down with onfocus needs double click to show menu

On my page using Internet explorer I have a drop down but on the first load of the page because it has a onFocus on it, it needs a double click to show menu. How do I avoid the double click.
The onFocus must still fire but the menu must show at the same time?
how do I do this because the double click is irritating?
Here is a simple example
http://jsfiddle.net/tgH7b/3/
here is the code
<select name="cars" >
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
<select name="cars" onFocus="this.style.background = '#999';$(this).click();">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>​
The only solution i can think of is to use focusin() callback function instead:
NOTE: focusin() supports event bubbling
http://jsfiddle.net/2AUs6/
<select name="cars" >
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
<!-- this one -->
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
$('select[name=cars]:eq(1)').focusin(function(){
$(this).css('background','#999')
})
Here is a possible solution from code project
http://www.codeproject.com/Questions/89610/ASP-NET-how-to-create-a-dropdownlist-that-onfocus

Categories

Resources