Control Multiple dropdown box by one main dropdown box - javascript

I am trying to create a main drop down box which control multiple drop down box. This multiple drop down box created in loop so i need dynamic script which works on class or id.
example -
<form method="post" name="postage">
Select All
<select id="options1" name="se1" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
Select Manually-
<select id="options2" name="se2" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<select id="options3" name="se3" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<select id="options3" name="se4" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<input type="submit" name="submit_result" />
</form>
I found one script but i don't know where to change -
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$('.west-yorkshire').change(function({
var value = $(this).val();
$('.className').each(function(
$(this).val(value);
alert(value);
));
}));
}//]]>
</script>

Is this what you were trying to achieve ? http://jsfiddle.net/9R9DV/2/
Changed some JS code
$(document).ready(function(){
$('#options1').change(function(){
var value = $(this).val();
$('.manual').each(function(){
$(this).val(value);
});
});
});
and classes to HTML code
<select class="manual" id="options2" name="se2" >
...
<select class="manual" id="options3" name="se3" >
...
etc.

Related

Html-Javascript form Validation not working

I am trying to validate that all fields of my form are filled out with Javascript, but it is just not working. I am new to web development, any help is greatly appreciated. Here is my HTML:
<form name="form" action="actionFG.php" method="post" onsubmit="return val()";>
<p>First Quarter Grade:</p>
<select name = "q1"><option selected value="0" disabled="disabled"> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Second Quarter Grade:</p>
<select name = "q2">
<option selected value="0" disabled="disabled"> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Third Quarter Grade:</p>
<select name = "q3">
<option selected value="0" disabled="disabled"> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Fourth Quarter Grade:</p>
<select name = "q4">
<option selected value="0" disabled="disabled"> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p><input type="submit" value="Enter"></p>
</form>
And here is my JavaScript:
function val(){
if (form.q1.selectedIndex == 0) {
alert('Please Enter Your Grade for Quarter 1');
return false;
} else if (form.q2.selectedIndex == 0) {
alert('Please Enter Your Grade for Quarter 2');
return false;
} else if (form.q3.selectedIndex == 0) {
alert('Please Enter Your Grade for Quarter 3');
return false;
} else if (form.q4.selectedIndex == 0) {
alert('Please Enter Your Grade for Quarter 4');
return false;
}
return true;
}
Working code without javascript:
<form>
<p>First Quarter Grade:</p>
<select required>
<option value=""> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Second Quarter Grade:</p>
<select required>
<option value=""> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Third Quarter Grade:</p>
<select required>
<option value=""> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Fourth Quarter Grade:</p>
<select required>
<option value=""> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<button type="submit">submit</button>
</form>
I have just added the required attribute to the select elements, this marks them as required.
Edit
Added snippet instead of JS Bin - Thanks to evolutionxbox
Your code works for me. I had the < script > in the < head >.
Of course, I had to add this...
<input type="submit" />
</form>
Other than that, I got form validation and valid submit when all fields were filled in Chrome, IE and Firefox.
Here is a native HTML5 example how to get simple validation without using Javascript.
This simple example works fine without Javascript. What I 've done? The select elements got the required attribute. So a user has to select a value. If the value of these select elements is empty when the form is submitting, you will get an error message as a tooltip next to the empty select element.
This is the simplest way. Beyond that every modern browser handels the validation different. The tooltips with the error messages are displayed different from browser to browser. If you want a consistent layout, you have to deal with the Constraint Validation API of HTML5.
<form>
<p>
<label for="select-1">Select 1</label>
<select name="select-1" id="select-1" required>
<option hidden>choose</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</p>
<p>
<label for="select-2">Select 2</label>
<select name="select-2" id="select-2" required>
<option hidden>choose</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</p>
<button type="submit">submit</button>
</form>

Set selected option to multiple list using jQuery

I have a list from DB which is displayed in select multiple tags:
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
<option value="4">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7">Yellow</option>
</select>
Given an array of values from DB, need to select only those items that are found in the DB array, for example [2,4,7]. How do I push, with jQuery, attr('selected') to these option tags?
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2" selected="selected">Green</option>
<option value="3">Blue</option>
<option value="4" selected="selected">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7" selected="selected">Yellow</option>
</select>
Like above.
You've just to use the .val() method to achieve that :
$('#list').val([2,4,7]);
$('#list').val([2,4,7]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
<option value="4">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7">Yellow</option>
</select>
For the sake of completeness, I thought I would add a plain javascript solution.
Here's what I came up with, using an array, a loop, document.querySelector and setAttribute:
var preSelected = [2,4,7];
for (var i = 0; i < preSelected.length; i++) {
var option = document.querySelector('#list option[value="' + preSelected[i] + '"]');
option.setAttribute('selected','selected');
}
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
<option value="4">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7">Yellow</option>
</select>

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 dynamically display a placeholder and deselect the other options, in a select form menu using Javascript/Jquery

I have the following drop-down menu:
<form action="...">
<select name="fruits" id="my-fruits">
<option value="" disabled selected>Select a fruit</option>
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="peach">peach</option>
</select>
<select name="animals" id="my-animals">
<option value="" disabled selected>Select an animal</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="iguana">iguana</option>
></select>
</form>
What I need is when the user changes the selected option in one filed (i.e. on change event), the placeholder to be displayed on the other and vice-versa.
For example, lets say that the user had already selected orange in #my-fruits. Now, when the user changes the selection from dog to cat in #my-animals:
the placeholder "Select a fruit" to be displayed automatically on #my-fruits field, and
then, the <option value="orange"> have its "selected" attribute removed
Ira, try this:
$('#my-fruits')
.add('#my-animals')
.on('change', function () {
$(this).siblings().prop('selectedIndex', 0);
});
Also, remove unnecessary arrow in this line:
></select>
Good luck ;)
$('select').change(function() {
$(this).siblings('select').prop('selectedIndex', 0);
console.log($('option:selected', this).val())
console.log($(this).siblings('select').val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="...">
<select name="fruits" id="my-fruits">
<option value="" disabled selected>Select a fruit</option>
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="peach">peach</option>
</select>
<select name="animals" id="my-animals">
<option value="" disabled selected>Select an animal</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="iguana">iguana</option>
</select>
</form>
Just set the selected option of sibling select to first index
Try
$('#animals').change(function() {
$('#fruits').val("");
});

Display value in input field from multiple select field

<select name="place_have" class="form-control" multiple>
<option value="locker">locker</option>
<option value="storage">storage</option>
<option value="bathroom">bathroom</option>
<option value="food">food</option>
<option value="parking">parking</option>
<option value="play ground">play ground</option>
<option value="smoking room">smoking room</option>
</select>
Values selected above should display in another input text field below. Any help?
Using jQuery:
$("select[name='place_have']").change(function(){
var value = $(this).val();
$("input#optionOutput").val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="place_have" class="form-control" multiple>
<option value="locker">locker</option>
<option value="storage">storage</option>
<option value="bathroom">bathroom</option>
<option value="food">food</option>
<option value="parking">parking</option>
<option value="play ground">play ground</option>
<option value="smoking room">smoking room</option>
</select>
<input type="text" id="optionOutput">

Categories

Resources