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
Related
One Form on the page I am accessing. This form has a dropdown with 3 options. I need to select the third option. Accessing the webpage from a C# program with cefsharp library (embedded web browser).
I can change the displayed text using
document.forms[0].getElementsByClassName('css-0 Select__single-value')[0].innerText="Keep in-play";
but this has not been registered. Have also tried to trigger input and change events but it is still not recognising my selection.
Any suggestions?
Here is the original DOM for the form:
<div class="bet-widget-optional-params">
<div class="bet-params">
<div class="param-wrapper"><span class="param-label"><a class="link" href="https://help.smarkets.com/hc/en-gb/articles/115003946591" target="_blank">Time In Force</a></span>
<div class="param-select">
<div class="css-0 Select custom-select-box Select menu-on-click">
<div class="css-0 Select__control">
<div class="css-0 Select__value-container Select__value-container--has-value">
<div class="css-0 Select__single-value">Default</div><input id="react-select-bet-param-selector-input" readonly="" tabindex="0" class="css-14uuagi" value=""></div>
<div class="css-0 Select__indicators"><span class="css-0 Select__indicator-separator"></span><span aria-hidden="true" class="Select__arrow-zone"><span class="Select__arrow"></span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In JavaScript you can set the selectedIndex property.
elem.selectedIndex = 2;
Setting -1 will remove any selection, and any positive integer will select that item in the list (0-indexed)... so if you want the 3rd item, just set it to 2.
HTMLSelectElement.selectedIndex docs
The property works as a getter too, so if you want to know which element is selected, you can request it like:
var currentSelectedIndex = elem.selectedIndex;
Full interactive example below:
var selectElem = document.getElementById('select');
var pElem = document.getElementById('p');
var buttonElem = document.getElementById('button');
selectElem.addEventListener('change', function() {
var index = selectElem.selectedIndex;
pElem.innerHTML = 'selectedIndex: ' + index;
});
buttonElem.addEventListener('click', function(){
selectElem.selectedIndex = 2;
});
<p id="p">selectedIndex: 0</p>
<select id="select">
<option selected>Option A</option>
<option>Option B</option>
<option>Option C</option>
<option>Option D</option>
<option>Option E</option>
</select>
<input type="button" id="button" value="Set it to C (2)"/>
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>
When clicked, I want to go these links, but it doesn't work.
How can I make it work? Thanks.
<div class="col-lg-2">
<label class="control-label" for="Level">Filter</label>
<select id="EType" class="form-control" name="EType">
<option value="#Url.Action("Approver","Degree", new { Area = "Options", value=3 } )">ID</option>
<option value="#Url.Action("Approver","Degree", new { Area = "Options", value=4 } )">ID2</option>
</select>
</div>
You can use this example. This is not MVC framework problem. Probably you used asp.net web form. This framework not working web form. You must use javascript methods. I create an example fastly for you with jQuery.
// find elements
var selectItem = $("#EType")
// handle select and go to link
selectItem.on('change', function(){
location.href = $(this).val();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-2">
<label class="control-label" for="Level">Filter</label>
<select id="EType" class="form-control" name="EType">
<option value="#">Select and go</option>
<option value="https://omer.mollamehmetoglu.com">ID</option>
<option value="https://www.onedio.com">ID2</option>
<option value="https://www.stackoverflow.com">ID3</option>
</select>
</div>
I have a simple Bootstrap form with a select input:
<div class="form-group">
<label for="category" class="control-label col-sm-3">Category</label>
<div class="input-group col-xs-8">
<select class="form-control" name="category" id="category">
<option value="Fruit">Fruit</option>
<option value="Vegetables">Vegetables</option>
</select>
</div>
</div>
The users now have a requirement to be able to add a new option dynamically to the select menu rather than be restricted to the items on the select menu.
I'm not sure if it's possible to modify a select menu and how to make it consistent with the rest of the Bootstrap framework?
To add an option dynamically, there should be a UI button giving you that choice. To get user input, we can use the window.prompt method.
We then create an option element, set its value attribute and set its name. Then just append these elements and nodes to the DOM with appendChild
Try playing around with this. I added some items like Steak, potatoes and beer.
var addOption = document.getElementById("add-option");
var selectField = document.getElementById("category");
addOption.addEventListener("click", function() {
var item = prompt("What would you like");
var option = document.createElement("option");
option.setAttribute("value", item);
var optionName = document.createTextNode(item);
option.appendChild(optionName);
selectField.appendChild(option);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="category" class="control-label col-sm-3">Category</label>
<div class="input-group col-xs-8">
<select class="form-control" name="category" id="category">
<option value="Fruit">Fruit</option>
<option value="Vegetables">Vegetables</option>
</select>
</div>
</div>
<button id="add-option" class="btn btn-primary">Add a new option</button>
You mean something like this?
some select
<select id="region" class="selectpicker">
<option>region 1</option>
<option>region 2</option>
<option>region 3</option>
</select>
jquery js
$('.selectpicker').selectpicker();
$("#region").on('change', function () {
$(this)
.append('<option>region4</option><option>region5</option>')
.selectpicker('refresh');
});
I have a dropdown with two tiers. I want to get the option value from the item selected from the second dropdown list.
I have figured out how to do this for the first list, but I want to be able to grab the value for -any- list. In my jsfiddle, you'll see there's a value in console.log for any of the items in the Pie list when you click on them, but not for any of the items in the Trees or Cars lists when they're clicked.
I thought I could just give all of the selection lists the same ID, but apparently not. Any suggestions? I've done some searching, but haven't found what I'm looking for. I'm using D3 and jQuery already, so those are good, but plain javascript is also fine. Thanks!
jsfiddle is here.
<div class="ccms_form_element cfdiv_custom" id="indSelectors">
<label>Type:</label>
<select size="1" id="dropStyle" class=" validate['required']" title="" type="select" name="style">
<option value="">-Select-</option>
<option value="Pies">Pies</option>
<option value="Trees">Trees</option>
<option value="Cars">Cars</option>
</select>
<div class="clear"></div>
<div id="error-message-style"></div>
</div>
<div id="Pies" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Pies</label>
<select id="inds">
<option value="">- Select -</option>
<option value="28">Apple</option>
<option value="3">Cherry</option>
<option value="44">Pumpkin</option>
</select>
</div>
<div id="Trees" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Trees</label>
<select id="inds">
<option value="">- Select -</option>
<option value="38">Maple</option>
<option value="11">Oak</option>
<option value="14">Birch</option>
</select>
</div>
<div id="Cars" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Cars</label>
<select id="inds">
<option value="">- Select -</option>
<option value="39">Mazda</option>
<option value="62">Ford</option>
<option value="25">Toyota</option>
</select>
</div>
<div class="clear"></div><div id="error-message-style-sub-1"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#dropStyle").change(function () {
var targID = $(this).val();
$("div.style-sub-1").hide();
$('#' + targID).show();
})
d3.select('#inds')
.on("change", function () {
var sect = document.getElementById("inds");
var section = sect.options[sect.selectedIndex].value;
console.log("section:", section);
// do other stuff with the section name
});
</script>
Element IDs should be unique within the entire document and it is not a good practice to have same id for multiple elements.
what does document.getElementById("inds") or $("#inds") return? You will get the first element always.
Rather, use a class. Just change id="inds" to class="inds" and update code like below.
$('.inds')
.on("change", function () {
var section = $(this).val();
console.log("section:", section);
// do other stuff with the section name
});
Updated Fiddle
Try this jQuery Plugin
https://code.google.com/p/jquery-option-tree/
Demonstration:
http://kotowicz.net/jquery-option-tree/demo/demo.html