jQuery selector not working. How to resolve? - javascript

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>

Related

How to set selected value of dropdown in JSP?

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.

When textbook has any value then automatically drop-down option will selected

When textbox has any value then how to automatically drop-down option will selected?
For Example :
This is my drop down
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">Green</option>
This is text box :
<input type="text" name="color" id="color" />
Question
If any type value is fill in text box, how to select automatically Green in drop down.
You could attach input event to the input to track the user change on input then if so select the option you want, check example bellow.
Hope this helps.
$('#color').on('input', function() {
if($(this).val()!="")
$('#colors').val("others");
else
$('#colors').val("0");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colors">
<option value="0">pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">Green</option>
</select>
<input type="text" name="color" id="color">
If you're using plain JavaScript, you can try this
<select id="selection">
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">Green</option>
</select>
<input type="text" id="color" oninput="myFunction()">
<script>
function myFunction() {
document.getElementById("selection").value ='others';
}
</script>
Note: I haven't added the code to handle reseting the selection in case there's no text in the textbox

Toggle selection from list with javascript [duplicate]

This question already has answers here:
How to toggle selection of an option in a multi-select with jQuery?
(8 answers)
Closed 6 years ago.
I have multiple select boxes used for filtering data from a database.
For example select box 1:
<select name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
And select box 2:
<select name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</option>
</select>
Problem is once i select a value from a field i can't deselect it and i don't want to reset all filters and start allover. I would like to be able to deselect the selected option on second click, for each box ... i.e.: 1st click => select / 2nd click=> deselect.
How is the easiest way to do this?
Thank you for patience!
Try something like this
<select id="select1" name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
<select id="select2" name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</option>
</select>
Jquery
$("#select1").change(function(){
$("#select2").val(null);
});
$("#select2").change(function(){
$("#select1").val(null);
});
Try this
$( "select" ).dblclick(function(){
$( this ).val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<select name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
<select name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</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>

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

Categories

Resources