How to set selected value of dropdown in JSP? - javascript

I have a jsp with a dropdown, I want to set the selected value based on parameter.The code is below:
<% String option=request.getparameter("option"); %>
<select name="option">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
So if I pass parameter like "test.jsp?option=2",then the second options is selected. Any hint on how to do it? Thx.

Related

jQuery selector not working. How to resolve?

console.log($('select[name="Units[]"] option:not(:first:selected)').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Units[]" multiple="multiple">
<option value="1">Example1</option>
<option value="2" selected="selected">Example2</option>
<option value="3" selected="selected">Example3</option>
</select>
As you can see I don't want to display value 1 and selected value in the console but my program is not working according to my expectation How can I solve this issue?
What I understood from the question is that you don't want to display first option and selected option.
You can't use two selector like that. Instead you need to use it like this
console.log($('select[name="Units[]"] option:not(:selected):not(:first)').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Units[]" multiple="multiple">
<option value="1">Example1</option>
<option value="2" selected="selected">Example2</option>
<option value="3" selected="selected">Example3</option>
<option value="4" >Example4</option>
</select>
If you only want the selected values, you can get it like this
console.log($('select[name="Units[]"]').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Units[]" multiple="multiple">
<option value="1">Example1</option>
<option value="2" selected="selected">Example2</option>
<option value="3" selected="selected">Example3</option>
<option value="4" >Example4</option>
</select>

Dropdown select on multiple Attributes

I am looking for a way to change my selected value on a select box, but based on 2 attributes for example:
<select id="user_select">
<option value="1" value2="1">John</option>
<option value="2" value2="1">Jonas</option>
<option value="1" value2="2">George</option>
<option value="3" value2="1">Carl</option>
</select>
For example i want to set George as the selected value, normal $('#user_select').val(1) won't work as it it will cause confusion between John and George.
Thanks in Advance
One option is to select by value and value2
$('[value="1"][value2="2"]').attr('selected',true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="user_select">
<option value="1" value2="1">John</option>
<option value="2" value2="1">Jonas</option>
<option value="1" value2="2">George</option>
<option value="3" value2="1">Carl</option>
</select>

Filter the dropdown using jquery

I have a drop down which lists several countries and I want to display only a few countries depending on some conditions.
jquery is as below:
function form_onLoad() {
var countries = "";
if(document.forms[0].countries_new) {
countries = document.forms[0].countries_new.value;
}
}
Dropdown :
<select name="country" size="1">
<option value=""></option>
<option value="1" >Afghanistan</option>
<option value="2" >Albania</option>
<option value="3" >Algeria</option>
<option value="4" >Andorra</option>
<option value="5" >Angola</option>
<option value="6" >Antigua & Deps</option>
<option value="7" >Argentina</option>
<option value="8" >Armenia</option>
<option value="9" >Australia</option>
<option value="10" >Austria</option>
<option value="11" >Azerbaijan</option>
<option value="12" >Bahamas</option>
</select>
Inside the jquery, I want to replace the existing dropdown(above) which has all countries with the countries variable which has only a few options.
You can use JQuery library to achieve it
$('select[name="country"]').find('option').each(function(){
if($(this).text()=='Armenia' || $(this).attr('value')=='12'){
$(this).remove(); //It will remove Armenia and Bahamas
}
});

Resubmit form with selected option

I was wondering if it's possible to submit a form (dropdown list for the input) when the selected value selected="selected" is clicked. I can't seem to get it to work.
My code:
<form method="post" name='myform' id="box" action="javascript:alert('submitted')" onsubmit="if(this.f.value == -1){return false;}">
<fieldset class="box_fieldset">
<select name="f" id="f3" onchange="if(this.options[this.selectedIndex].value != -1){ document.forms['myform'].submit() }">
<option value="-1">-- select --</option>
<option value="1" >one</option>
<option value="2" selected="selected" >two</option>
<option value="3" >three</option>
</select>
</fieldset>
</form>
With the corresponding jsFiddle
As you can see, it's not possible to 're-submit' option 2 because it is already selected
(alert doesn't get triggered).
Is there a way to do this?
Well, use another event trigger.
window.onload should be appropriately.
jsFiddle link
when you are using onchange event you can't handle default values, like the one you chose (two);
<option value="-1" selected>-- select --</option>
<option value="1" >one</option>
<option value="2" >two</option>
<option value="3" >three</option>
<html>
<head>
</head>
<body>
<select id="slct">
<option value="1" onclick="clicked(this)">one</option>
<option value="2" onclick="clicked(this)">two</option>
<option value="3" onclick="clicked(this)">three</option>
</select>
<script>
function clicked(e){
var xml = new XMLHttpRequest();
xml.open("GET",""+this.value,false);
xml.send();
}
</script>
</body>
use such a trick to handle your requests

drop down list validation

in my form i have three drop down lists to select days. and their corresponding available time. If one selects available day as monday and time morning. then in rest two pair of drop down list morning slot for monday should be disabled. html code is as:
DAY 1:<select id="day1" title="- Select day -" name="wd1" id="wd1" tabindex="14" >
<option selected>-select-</option>
<option value="1" >Sunday</option>
<option value="2" >Monday</option>
<option value="3" >Tuesday</option>
<option value="4" >Wednesday</option>
<option value="5" >Thursday</option>
<option value="6" >Friday</option>
<option value="7" >Saturday</option>
</select>
TIME 1 : <select name="tslot1" id="tslot1" tabindex="15">
<option selected>-select-</option>
<option>Morning(8-12)</option>
<option>Afternoon(12-4pm)</option>
<option>Evening(4-8pm)</option></select><br><br>
DAY 2:<select id="day2" title="- Select day -" name="wd2" id="wd2" tabindex="16" >
<option selected>-select-</option>
<option value="1" >Sunday</option>
<option value="2" >Monday</option>
<option value="3" >Tuesday</option>
<option value="4" >Wednesday</option>
<option value="5" >Thursday</option>
<option value="6" >Friday</option>
<option value="7" >Saturday</option>
</select>
TIME 2 : <select name="tslot2" id="tslot2" tabindex="17" >
<option selected>-select-</option>
<option>Morning(8-12)</option>
<option>Afternoon(12-4pm)</option>
<option>Evening(4-8pm)</option></select><br/><br/>
DAY 3:<select select id="day3" title="- Select day -" name="wd3" id="wd3" tabindex="18" >
<option selected>-select-</option>
<option value="1" >Sunday</option>
<option value="2" >Monday</option>
<option value="3" >Tuesday</option>
<option value="4" >Wednesday</option>
<option value="5" >Thursday</option>
<option value="6" >Friday</option>
<option value="7" >Saturday</option>
</select>
TIME 3 : <select name="tslot3" id="tslot3" tabindex="19" >
<option selected>-select-</option>
<option>Morning(8-12)</option>
<option>Afternoon(12-4pm)</option>
<option>Evening(4-8pm)</option></select><br/><br/>
Please do help me with this problem...
In the HTML for the select tags you have used two id's namely "day1" and "wd1". id is a unique feature of a particular tag.So u can change it with a single id.
i have made the following changes to the HTML page :DAY 1:
<select id="day1" title="- Select day -" name="day1" tabindex="14" >
<option selected>-select-</option>
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>.
so we may refer to the select id "day1" and write a on change function for the necessary validations.
Javascript code:
$(document).ready(function(){
$("#day1").on('change',function() {
var index = $('#day1').get(0).selectedIndex;
alert(index+"index");
$('#day2 option:eq(' + index + ')').attr("disabled","disabled");
$('#day3 option:eq(' + index + ')').attr("disabled","disabled");
});
});
where "day2" and "day3" corresponds to the id of the below select fields with days.
Similarly same approach can be dealt with time too.
Have a look at this script http://plungjan.name/test/unique_days.html
Should help you get started

Categories

Resources