I have a string in which i have markup of drop down.I recive the string of drop down markup from server side now i have to retrive selected value.
for example i have this
var drop = " <select><option value=\"volvo\">Volvo</option> <option value=\"saab\" selected>Saab</option><option value=\"mercedes\">Mercedes</option><option value=\"audi\">Audi</option></select> ";
the variable drop has the markup of dropdown and i want the value of selected text value. In this case the "Saab" is selected and i want the its value which is "saab". So how i can do this?
You can use filter() to get select tag and val() to get the selected value
var drop = " <select><option value=\"volvo\">Volvo</option> <option value=\"saab\" selected>Saab</option><option value=\"mercedes\">Mercedes</option><option value=\"audi\">Audi</option></select> ";
document.write($(drop).filter('select').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Since there is only select tag you can just use $(drop).val()
var drop = " <select><option value=\"volvo\">Volvo</option> <option value=\"saab\" selected>Saab</option><option value=\"mercedes\">Mercedes</option><option value=\"audi\">Audi</option></select> ";
document.write($(drop).val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
If you are using jquery, and you don't mind a little bit of overhead (from jQuery compiling the string), just doing the following should work fine:
var drop = " <select><option value=\"volvo\">Volvo</option> <option value=\"saab\" selected>Saab</option><option value=\"mercedes\">Mercedes</option><option value=\"audi\">Audi</option></select> "
var value = $(drop).val();
val() will then return the value of the selected option.
Related
I've tried to search for what I'm after, and this is the closest I can get:
Make a Dropdown with Search Box using jQuery (by Yogesh Singh)
https://makitweb.com/make-a-dropdown-with-search-box-using-jquery/
It can provide a HTML Dropdown with Search capability.
However, what I hope to have is to have input capability as well. I.e., if nothing found, then use the user input as the result.
I tried to look at the code,
$(document).ready(function(){
// Initialize select2
$("#selUser").select2();
// Read selected option
$('#but_read').click(function(){
var username = $('#selUser option:selected').text();
var userid = $('#selUser').val();
$('#result').html("id : " + userid + ", name : " + username);
});
});
UPDATE: using datalist. Requirement:
if found, use found value as the result.
if nothing found, then use the user input as the result.
Maybe both are the same case, but I don't know js well to say that.
$(document).on('change', '#place', function () {
$("#fax").val($("#place").val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="place" list="places">
<datalist id="places">
<option value="WVC" label="503-882-1212"></option>
<option value="HAM" label="612-883-1414"></option>
<option value="WON" label="317-445-8585"></option>
</datalist>
<br>
<input type="text" id="fax">
I don't see an easy way to do that myself, as I don't know js quite well.
It is possible, to use the user input as the result if nothing found? thx
<datalist> is like a separate select element and linked to the text field previous to it and simply updates the value of textfield based on what is selected. If you like to run your code based on change event on the text field, you need to read the datalist first and then pick the label from it. If there is no value, then pick the text from the textfield.
$(document).ready(function () {
$(document).on('change', '#place', function () {
let myString =
$(this).next().find("option[value='" + $(this).val() + "']").prop("label");
myString = myString ? myString : $(this).val();
$("#fax").val(myString);
$(this).val(myString); //IF YOU LIKE TO SHOW SAME STRING IN TEXT FIELD TOO
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="place" list="places">
<datalist id="places">
<option value="WVC" label="503-882-1212"></option>
<option value="HAM" label="612-883-1414"></option>
<option value="WON" label="317-445-8585"></option>
</datalist>
<br>
<input type="text" id="fax">
I have dropdownlist on a webform. I need a 'hidden' variable per item in the dropdown list which I can retrieve clientside using the onchange event.
So on the page load I'm setting a custom attribute after I databind the dropdownlist:
For i = 0 To cboNameAL.Items.Count - 1
cboNameAL.Items(i).Attributes.Add("Charge_Rate", usernamesAdapterDataTable.Item(i).ChargeRate)
Next
This works and when I look at my rendered page I see this markup for each item in the dropdownlist
<option value="05ab8c45-f7ce-4250-8458-1421e79e8a51" charge_rate="32">dave</option>
My javascript function is firing fine from the onchange event, however I can't retrieve the attribute value for Charge_Rate.
I've tried every combination of:
var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>").selectedItem.attributes('Charge_Rate');
var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>").attributes('Charge_Rate');
var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>")attr('Charge_Rate');
var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>").getAttributes('Charge_Rate');
Each with either ('Charge_Rate') or ("Charge_Rate") or .Charge_Rate
I've debugged and the best I can do is for my variable lCharge_Rate to be null.
Any ideas? Happy to rework if it can't be done this way...
You can use the following code to get the value of your custom attribute
//This line will load the DOM of dropdown
var cboNameAL = document.getElementById("<%=cboNameAL.ClientID%>");
//This will return the selected option
var selectedOption = cboNameAL.options[cboNameAL.selectedIndex];
//This will give you the value of the attribut
var charge_rate = selectedOption.attributes.charge_rate.value;
You need to select the options first before you can get the attribute.
var e = document.getElementById("client_id"),
lCharge_Rate = e.options[e.selectedIndex].getAttribute('charge_rate');
document.write("Charge Rate = "+lCharge_Rate);
<select id="client_id">
<option value="05ab8c45-f7ce-4250-8458-1421e79e8a51" charge_rate="32">dave</option>
</select>
Create a variable that equals the value of your custom attribute, then use it as you desire. See my example and adjust as needed.
var $divAtribut = $("div").attr("Charge_Rate");
alert($divAtribut);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div Charge_Rate="4424">Click on run to get the attribute</div>
<code>
<!– my html –>
<select name="custom-select-two">
<option value="1" data-monthvalue="31">Jan</option>
<option value="2" data-monthvalue="28">Feb</option>
<option value="3" data-monthvalue="31">Mar</option>
<option value="4" data-monthvalue="30">Apr</option>
<option value="5" data-monthvalue="31">May</option>
<select>
<!– Get value of option’s custom attribute value from dropdown or select box –>
<script type="text/javascript">
$(document).ready(function(){
var monthvalue = $('.custom-select-two :selected').data('monthvalue');
alert(monthvalue); // here comes your dropdown option's custom attribute value
});
</script>
</code>
UPDATE : I test my code on firefox and everything was alright but on chrome :|
I have two different selecting drop lists . one for Province and another for cities.
I want to let users first select their Province then i show them cities selection list which is only containing cities of selected Province . my idea was to achieve it this way :
HTML
<select id="Province">
<option value = "1">Province1</option>
<option value = "2">Province2</option>
</select>
<select id = "CityList">
<option value = "1">city1</option>
<option value = "1">city2</option>
<option value = "2">city3</option>
</select>
cities with value one are inside Province with value one
jquery
$("#Province").change(function(){
$("#CityList option").css({'display':'none'});
var id = "#CityList option[value = " + $("#Province option:selected").val() + "]" ;
$(id).css({'display':'block'});
})
But the problem is none of the options will get visible again :|
And i checked if i'm selecting correct option by changing font color of it
I don't know why display : block is not working on them
If you just want to hide the options and then selectivly show them, hide and show are better options.
$("#Province").change(function(){
$("#CityList option").hide();
var id = "#CityList option[value = " + $("#Province option:selected").val() + "]" ;
$(id).show();
})
I have a selector on webpage with data-id and value
HTML
<select id="s1">
<option data-id="01">aaaa1</option>
<option data-id="23">bbb1</option>
<option data-id="451">ccc1</option>
<option data-id="56">ddd1</option>
</select>
<p></p>
JAVASCRIPT
$('#s1').change(function() {
var val = $(this).val();
var val_id =$(this).find('option').data('id');
$("p").html("value = " + val + "<br>" +"value-data-id = "+ val_id);
});
I wanna have actual value from selected selector and his data-id. I do not understand why I have data-id from only first option. This is my code http://jsfiddle.net/s55rR/
Please help me to find a bug.
You can do $(this).find('option:selected').data('id').
You've selected multiple elements ($(this).find('option')) but .data() only returns the value from the first element if called on a jQuery with length >1:
Description: Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.
If you only want the data-id value from the user-selected<option>, then you need to select only that element.
Because you selecting all options, and jQuery returning .data('id') of first one
var val_id =$(this).find('option:selected').data('id');
fiddle
I have a multiselect dropdown inside a table
<td>
<select multiple="multiple" name="multiple" id="multiple" class="required">
</select>
</td>
The option values are populated with json data.
for(var i=0;i<jsonString.length;i++){
var name=jsonString[i].Name;
$('#multiple').append('<option value=' + name + '>' + name + '</option>');
}
When the user start selection i am trying to display each selected item inside a paragraph
<script>
function displayVals() {
var multipleValues = $("#multiple").val() || [];
$("p").html( " <b>Selected Properties:</b> " +
multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();
</script>
But in the paragraph i get just one word per selection, not the complete name. (Say If i select "some text" i get only "some"). Can somebody point out where is the error?
While populating with JSON data use
<option values= > instead of `<option value>
Working fine for me now.`