Jquery to create new row :
var selectVal = $(parent).children().first().find('select').find('option[selectedGivenTo="true"]').val();
var newSelect = $(parent).children().last().find('select');
newSelect.each(function() {
var cloned = null;
cloned = $(this).clone();
cloned.val(selectVal);
I am trying to select the first value of dropdownlist as default value using jQuery as above but no value is selected & just displaying list in dropdown.I saw many references in stackoverflow but its not working for me.
HTML:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select>
jQuery:
$(function(){
$("select option:first").attr('selected','selected');
var _select = $('select')[0],
_v = _select.options[_select.selectedIndex].value;
alert(_v);
});
Demo
If you want to select it by value, then use the code below:
$('select option[value="defaultValue"]').attr("selected",true);
If you want to select via text contains in option, use the following code:
$('select option:contains("I am defualt Value")').prop('selected',true);
Related
do you know if there is a way to take all the values in the OPTION VALUE included in a SELECT?
i Will show you an example, I have this code:
<SELECT onChange="chData(this,this.value)">
<OPTION VALUE=MIPS1 >MIPS
<OPTION VALUE=MSU1 >MSU
<OPTION VALUE=PERCEN1 >% CEC
<OPTION VALUE=NUMGCP1 >nCPU
</SELECT>
I only know the first value which is MIPS1, and I need to take the other values. The is a way to write that if I know the first MIPS1 I will search for the other values Included from the ?
Thanks in advance :)
You can get the <select> element that has an option with a specific value using something like this:
const select = document.querySelector('option[value=MIPS1]').closest('select');
Once you have the <select> element you can retrieve it's options using something like this:
const options = select.querySelectorAll('option');
Or:
const options = select.options;
As #charlietfl mentioned, .closest is not supported by all browsers, instead of that, you could use .parentElement.
jQuery version
var opt = "MIPS1";
const $sel = $("option[value='"+opt+"']").parent()
const options = $("option",$sel).map(function() { return this.value }).get()
console.log(options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<SELECT onChange="chData(this,this.value)">
<OPTION VALUE=MIPS1>MIPS
<OPTION VALUE=MSU1>MSU
<OPTION VALUE=PERCEN1>% CEC
<OPTION VALUE=NUMGCP1>nCPU
</SELECT>
The example below shows how you can do this. The Jquery is fully commented.
Let me know if it isn't what you were hoping for.
Demo
// Create array
var options = [];
// Load option value you're looking for into a variable
var search_term = "MIPS1";
// Find option with known value, travel up DOM tree to select and then find all options within it
$("option[value='" + search_term + "']").closest("select").find("option").each(function() {
// Add values to array
options.push($(this).val());
});
// Print the array
console.log(options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<SELECT onChange="chData(this,this.value)">
<OPTION VALUE=MIPS1>MIPS
<OPTION VALUE=MSU1>MSU
<OPTION VALUE=PERCEN1>% CEC
<OPTION VALUE=NUMGCP1>nCPU
</SELECT>
I think it is a bad idea not to give id to your html element in the first place, however if you need to do it that way, then the code below assumes you have only one select tag on your page.
let select = document.querySelector('select');
options = select.childNodes.filter((c) => c.tagName==='OPTION')
.map((o) => o.value);
console.log(options)
This will help you get: selected value, selected text and all the values in the dropdown.
$(document).ready(function(){
$("button").click(function(){
var option = $('option[value="MIPS1"]');
var select = option.parent();
var value = $(select).find(":selected").val();
var optionName = $(select).find(":selected").text();
var result = "value = "+value+"\noption name = "+optionName+"\nall values = ";
$(select).each(function(){
result+=($(this).text()+" ");
});
console.log(result);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value=MIPS1 >MIPS</option>
<option value=MSU1 >MSU</option>
<option value=PERCEN1 >% CEC</option>
<option value=NUMGCP1 >nCPU</option>
</select>
<button>click</button>
I am working on a Drop Down Select element which have 3 options lets name it as X,Y,Z having values 1,2,3 respectively.Now my question is to how to set a conditions or what to do next to show graph every time when i select option as earlier it only shows the graph of first option which i select first because of onchange function occured already.
Try this code. This will give you current option selected, based on which you can perform your next operations.
HTML:
<select id="select" onchange="onOptionChange();">
<option value="1">X</option>
<option value="2">Y</option>
<option value="3">Z</option>
</select>
JS:
function onOptionChange() {
console.log($('#select').val()); //prints current option selected
}
<select id="ddrp1">
<option value="">Select an option</option>
<option value="1">X</option>
<option value="2">Y</option>
<option value="3">Z</option>
</select>
Assuming an id for dropdown select is ddrp1.
$("#ddrp1").on("change", function() {
var selectedVal = this.value;
var selectedText = this.options[this.selectedIndex].text;
var selectedVal = $(this).find(':selected').val();
var selectedText = $(this).find(':selected').text();
// set your condition here based on selectedText or selectedVal to display graph
});
I have a dropdown and I need to get the entire object using the value. I can get it using the text with contains but the same does not work by value. Here is my code. What am I doing wrong?
//var option = $("#car option:contains('Volvo')");
//alert(option.attr('value'));
var option = $("#car option:contains('value1')");
alert(option.attr('value'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="car">
<option value="value1">Volvo</option>
<option value="value2">Saab</option>
<option value="value3">Mercedes</option>
<option value="value4">Audi</option>
</select>
The commented portion works fine. I need to find a way to get the entire object using the value instead.
While :contains selector select elements that contain the specified text. You can use [attribute = "value"] .. I highly recommended to read about Selectors Here
//var option = $("#car option:contains('Volvo')");
//alert(option.attr('value'));
var option = $("#car option[value='value1']");
alert(option.attr('value'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="car">
<option value="value1">Volvo</option>
<option value="value2">Saab</option>
<option value="value3">Mercedes</option>
<option value="value4">Audi</option>
</select>
//var option = $("#car option:contains('Volvo')");
//alert(option.attr('value'));
var option = $("#car option[value=value1]");
alert(option.attr('value'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="car">
<option value="value1">Volvo</option>
<option value="value2">Saab</option>
<option value="value3">Mercedes</option>
<option value="value4">Audi</option>
</select>
The issue is that jQuery :contains refer only to the text node of the element,not the content of an attribute.
you can use selector of an attribute in the following way:
var option = $("#car option[value=value1]");
alert(option.attr('value'));
var e = document.getElementById("car");
var selectedOption = e.options[e.selectedIndex].value;
alert(selectedOption);
First you target the selection list element with variable e, then you use the state of that element and assign it to selectedOption.
I have a dropdown box with the following structure
<select
name="propertytype"
value={this.state.propertytype}
onChange={this.handlePropertyTypeChange}>
<option value="">Property Type</option>
<option value="T">Terrace</option>
<option value="F">Flat</option>
<option value="S">Semi</option>
<option value="D">Detached</option>
</select>
the handle function looks like this - I can obtain the value of the dropdown with e.target.value --- but I need to obtain the label - so instead of "F" I need "Flat".
handlePropertyTypeChange: function(e) {
this.setState({propertytype: e.target.value});
}
-- I have tried obtaining it using e.target.nodeName
JavaScript:
var el = document.getElementByName('prototypetype');
var text = el.options[el.selectedIndex].innerHTML;
With JQuery:
$('select option:selected').text();
With React event:
var index = event.nativeEvent.target.selectedIndex;
event.nativeEvent.target[index].text
See the demo from #Dhiraj Bodicherla: Get selected option text using react js?
I am trying to get the content of a select option which is specified by the selected options.
I can get the selected options to tell me the data-parent but I can't use that to get the text of the parent option.
<select id="addCatSelectCats" multiple="multiple">
<option id="Cat55" data-parent="5">Parent Cat</option>
<option id="Cat357" data-parent="55">Sub Cat</option>
</select>
$(document).on('change', '#addCatSelectCats',function() {
$("#addCatSelectCats option").each(function(){
if($(this).is(':selected')){
var dataparent = $(this).attr('data-parent');
if(dataparent > 0){
var parent = $('#Cat'+dataparent).text();
alert(parent);
}
}
});
});
Where am I going wrong?
You could do with a little less code
$(document).on('change', '#addCatSelectCats',function() {
var parent = $("#addCatSelectCats option:selected").text();
alert(parent);
});