This question already has answers here:
Which selector do I need to select an option by its text?
(20 answers)
Closed 3 years ago.
I try to change the text of one of select option through jquery. But it's not working.
https://jsfiddle.net/oj3spt0y/8/
$(document).ready(function() {
var els = $('#coupon-options select').find('option[text="Unknown"]'); // tried .text('sd')
$.each(els, function(i, v) {
v.text('sd') // tried $(this).text('sd')
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="coupon-options">
<select name="asd" class="form-control" title="" id="gfhfg">
<option value="1" selected="">Unknown</option>
<option value="2">Yes</option>
<option value="3">No</option>
</select>
</div>
You can try with jQuery's :contains() Selector
$(document).ready(function() {
var op = $('#coupon-options select option:contains(Unknown)');
op.text('sd')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="coupon-options">
<select name="asd" class="form-control" title="" id="gfhfg">
<option value="1" selected="">Unknown</option>
<option value="2">Yes</option>
<option value="3">No</option>
</select>
</div>
Related
This question already has answers here:
Trigger click on select box on hover
(6 answers)
Closed 2 years ago.
I have a select option that is working nicely on click.
Now, I want that select option will be open when mouse is on hover on that select option.
my html is:
<select name="select" id="inputselect" class="form-control">
<?php
$i=1;
for($i=1; $i<=10; $i++){ ?>
<option value="<?=$i?>">option_<?=$i?></option>
<?php }
?>
</select>
// script will be like this
$('#inputselect').mouseover(function(event){
// code for open the select option on mouse hober
});
Thanks in advance
See the below snippet.Let me know in comments if you have any qns.
$('select').hover(function() {
$(this).attr('size', $('option').length);
}, function() {
$(this).attr('size', 1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option>first</option>
<option>second</option>
<option>third</option>
</select>
You can check the same at Trigger click on select box on hover . You need Chosen for this.
HTML:
<select id="dropdown" data-placeholder="Mouseover">
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
</select>
JS:
$("#dropdown").chosen().next(".chosen_container").hover(
function(){
$("#dropdown").trigger("liszt:open");
},
function(){
$(this).trigger("click");
}
);
Try This -
$('#inputselect').mouseover(function(event){
$('#inputselect').show();
$('#inputselect')[0].size= $('#inputselect option').length;
});
$('#inputselect').mouseout(function(event){
$('#inputselect').show();
$('#inputselect')[0].size=1;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<select name="select" id="inputselect" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
Brief
I am attempting to change the value of all dropdown boxes with the class of admin__control-select to remove when the Remove All button is pressed
Issue
The below code appears to work, but only updates the value of the first select box. I tried using querySelectorAll but that doesn't work at all.
Code
<script type="text/javascript">
var selectFunction = function() {
document.querySelector('.admin__control-select').value = "remove";
};
</script>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<input type="button" value="Remove All" onclick="selectFunction()" />
Use querySelectorAll(), it returns an Array with matched elements.
Then, traverse the array with for().
var elms = document.querySelectorAll('.admin__control-select');
for(var i=0; i<elms.length; i++){
elms[i].value ='remove';
}
Try this:
<script type="text/javascript">
var selectFunction = function() {
var selects = document.querySelectorAll('.admin__control-select');
selects.forEach(s => s.value = 'remove');
};
</script>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<input type="button" value="Remove All" onclick="selectFunction()" />
querySelectorAll()
returns the elements so you have to loop over them and set the value property.
This question already has answers here:
Javascript/jQuery: Set Values (Selection) in a multiple Select
(9 answers)
Closed 5 years ago.
I have a html
<select name="availableon[]" class="form-control" multiple>
<option value="pc">PC</option>
<option value="iphone">iPhone</option>
<option value="android">Android</option>
</select>
And in my AJAX success function I have the value
availableon = 'pc,iphone'
Now I want to explode the availableon variable and select the multiple select based on value using javascript or jquery. How will I do that?
You can change the data to an array and then set the value with the array
var availableon = 'pc,iphone'
var dataarray = availableon.split(",");
$("select").val(dataarray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="availableon[]" class="form-control" multiple>
<option value="pc">PC</option>
<option value="iphone">iPhone</option>
<option value="android">Android</option>
</select>
This question already has answers here:
Get selected value in dropdown list using JavaScript
(33 answers)
Closed 8 years ago.
I written the following code using thymeleaf
<div class="form-group">
<div class="col-xs-12 col-sm-9">
<div class="clearfix">
<label
class="control-label col-xs-12 col-sm-4 no-padding- right"
for="name">System</label> <select
class="tbrightspace input-large" id="userCategory"name="systemId"
style="margin: 0px 0px 10px 0px; padding: 0px; width:42%;">
<option th:text="--Select--">Select</option>
<option th:each="roles:${systemList}"
th:value="${roles.systemId}"
th:selected="${roles.systemName}"
th:text="${roles.systemName}" />
<!-- <option value="101">Collections Management</option>
<option value="102">CHD</option>
<option value="103">Client Tools</option> -->
</select>
</div>
</div>
</div>
in this DropDown box,three data are loaded.Now i want to get the selected data ID,because i want to findall data in DB table by passing the ID in ajax url,Like
$.ajax({
url: "/collection-ui/api/permissions/findall/id", //http://localhost:8080
success: function( treeData ) {
var tree = $("#tree2").dynatree("getTree");
var rootNode = $("#tree2").dynatree("getRoot");
I juz tried like
<script th:inline="javascript">
/*<![CDATA[*/
var id=/*[[#{{id}(id=${systemList.get(0).systemId})}]]*/
alert(id);
/*]]>*/
</script>
This is alert or give the first object id data only.But i want to get the ID while select the data in dropdown box.How can i?? plz anybody help
Try this
$("#dropdown").on('change',function(){
var getValue=$(this).val();
alert(getValue);
});
Another approach:
$('#dropdown').change(function(){
var id = $(this).find('option:selected').attr('id')
})
Although this is almost duplicate of Old Post
But you want ID so you can try something like this..
HTML:
<select id="ddlViewBy">
<option id="s1" value="1">test1</option>
<option id="s2" value="2" selected="selected">test2</option>
<option id="s3" value="3">test3</option>
</select>
<a name="ding" onclick="test()">Click me!!</a>
Javascript:
function test(){
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].id;//text
alert(strUser);
return false;
}
Here is working jsFiddle
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to get the selected value of dropdownlist using JavaScript?
javascript selected value
I have a drop down list for quantities, like this:
<select id="Quantity" name="Quantity" class="quantity_select">
<option id="1" selected="selected" value="1">1</option>
<option id="2" value="2">2</option>
<option id="3" value="3">3</option>
</select>
I need to use javascript to find the value of the currently selected quantity. When I select e.g. option 2, the selected="selected" doesn't change to the new option. How can I use the DOM to get the current selected quantity?
Thanks
Option 1
HTML
<select id="Quantity" name="Quantity"
class="quantity_select" onchange="SetValue(this.value)>
<option id="1" selected="selected" value="1">1</option>
<option id="2" value="2">2</option>
<option id="3" value="3">3</option>
</select>
JavaScript
function SetValue(val) {
alert(val); // This will be the selected value in the drop down
}
Option 2
If you already have JS in place, and don't want to use option 1, you can simply get the value with getElementById():
var ddl = document.getElementById('Quantity');
var val = ddl.options[ddl.selectedIndex].value;
Use document.getElementById('Quantity').value
USe
document.getElementById('Quantity').options[document.getElementById('Quantity').selectedIndex].value;