I am learning a jQuery.My question is When I click on edit button then particular dropdown value show which I selected. This selected value I want to store in jQuery so how can I store it?I have attached image please help me.
$('select').val() would get you the value attribute.
In case you want the text of selected option use $('select').find(':selected').text().
Here is an example:
$(function() {
//Get the selected value
console.log($('.service_select').val());
//Captures the selected value when the selection changes
$('.service_select').change(function() {
console.log($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="service_select" class="service_select">
<option value="0">-- Select --</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
try with
For Selected Value
var selected_value= $('.service_select').val();
For all options values of dropdown
var all_values= $('.service_select option').map(function(obj){
return $(obj).attr('value');
});
For all options values with key value pair
var all_values= {};
$('.service_select option').each(function(){
all_values[$(this).attr('value')]=$(this).text();
});
Related
I want to get Select Element Array value using javascript but i cant get i get all other element value like text etc but cant get select array value.
Select element in My Html code
<select name="abc[]"></select>
<select name="abc[]"></select>
and Javascript Code for get Select Value
document.querySelectorAll("input[name='abc[]']")
but cant get its value, Help me out of this
First: use select, not input in your css selector. Here's a snippet to find the value and text of the selected option:
const selectedOption = document.querySelector(`select[name='abc[]'] > option:checked`);
console.log(`Value: ${selectedOption.value}, Text: ${selectedOption.textContent}`);
<select name="abc[]">
<option value="1">text 1</option>
<option value="2">text 2</option>
<option value="3" selected>text 3</option>
<option value="4">text 4</option>
</select>
Try this : [1]: https://jsfiddle.net/phiphophe/c7a3gdtn/1/
var matches = document.querySelectorAll("select[name='abc[]']");
for(var select of matches){
console.log(select.value);
}
I need the default value of dropdown list for business logic if user doesn't select any value from dropdown list then i have to use default value of dropdown
You can get it by doing document.getElementById('idoftheselect').value
function getDefaultVal() {
console.log(document.getElementById('sel').value)
}
<select id='sel'>
<option val='1'>1</option>
<option val='2'>2</option>
<option val='3'>3</option>
<option val='4'>4</option>
<option val='5'>5</option>
</select>
<button type='button' onclick='getDefaultVal()'>Get Value</button>
add one more option with selected attribut
<select id="someId">
<option value="0" selected>Default</option>
</select>
using this
$('#selector option:selected').val();
In that case add one more option in dropdown like
<option value="-1">-select-</option>
then using jquery
$('select option:selected').val();
will always give the current dropdown selected value.
I have two dropdowns and I want to make it whenever someone selects something in one dropdown the same thing is selected in the other dropdown. I can't get it to work when I select an option in the first dropdown then it doesn't select the same option in the other dropdown.
Here's the formula
$( function() {
$("input[name='FirstFlangeTypeDrop']").on("change", function(e) {
var newValue = e.target.value;
$("input[name='SecondFlangeTypeDrop'][value='" + newValue + "']").prop("selected", true);
});
});
Your question is a bit unclear to me. But I think this is what you are looking for.
$(function() {
$("select[name='FirstFlangeTypeDrop']").on("change", function(e) {
var newValue = $(this).val(); // get selected value
$("select[name='SecondFlangeTypeDrop']").val(newValue); // set selected value
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="FirstFlangeTypeDrop">
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<select name="SecondFlangeTypeDrop">
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
I'm creating a form. I have two fields, 1. default value field and 2. preview field. Both are multiselect fields. The user will add the options to the multiselect manually. Whenever the user chooses an option in the default value, the same value should be shown as selected in the preview field. When the user removes one option, the same option should be unselected. This is how I've written the onchange event for this multiselect:
$("#MultiSelect_DefaultValues").change(function() {
alert($(this).val());
$("#MultiSelect_Preview").val($(this).val());
});
I get the correct value in the alert. But, in the preview field, there is no reaction. All the options available in the default value field are available in the preview field too. But, the options selected in the default value field is not selected in the preview field. What's wrong with this? What should I change, so that the changes in the default field reflects in the preview field too?
You said you are using select2 so execute like this:
$("#MultiSelect_DefaultValues").change(function () {
alert($(this).val());
var prevSelect = $("#MultiSelect_Preview").select2();
prevSelect.val($(this).val()).trigger('change');
});
The values on the option tags need to match for this, if I'm understanding correctly what you're trying to achieve that is.
e.g.
$("#MultiSelect_DefaultValues").change(function() {
console.log($(this).val());
$("#MultiSelect_Preview").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="MultiSelect_DefaultValues" multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<select id="MultiSelect_Preview" multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
You can provide multiple replacements by sending an int array to the select method.
$('#cars').val([1,3]);
//or $('#cars').selectpicker('val', [1,2,3]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="cars" id="cars" multiple>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
you can use this code
<script>
$("#MultiSelect_DefaultValues").change(function () {
$('select[id="MultiSelect_Preview"]').find('option[value=' + $(this).val() + ']').attr("selected", true);
});
</script>
I'm having a rather different structure of HTML and I am trying to get the selected value of a dropdown list as seen in the below code:
<div class="quantityDropdown quantityDropdown-cartItem">
<select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker"
data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
My code returns null.
I want to get 2 as my value. As you can see, there's no value in the selected attribute.
var quantity = document.querySelector(".quantityDropdown select").getAttribute("selected");
How do I get the value 2 that's outside the option tag?
You should get the option tag, like this:
var quantity = document.querySelector(".quantityDropdown select option:checked");
You could use checked also for checkbox and radio.
This will give you the value of the selected item:
quantity = document.querySelector(".quantityDropdown select").value;
However if you want the actual content of the selected item (i.e. the text shown) outside of the option tag, use:
var quantity = document.querySelector(".quantityDropdown select")[document.querySelector(".quantityDropdown select").selectedIndex].innerHTML;
Use document.querySelector(".quantityDropdown select").selectedIndex
To get the selected option value you need to use two properties on the select element: options and selectedIndex to get the html option element, then you can get the value.
const dropdown = document.querySelector('.cart-quantity-picker')
console.log('selectedIndex', dropdown.selectedIndex)
console.log('options', dropdown.options)
console.log('selected', dropdown.options[dropdown.selectedIndex].value)
<div class="quantityDropdown quantityDropdown-cartItem">
<select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker" data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
in case you need the get the 'value' :
var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
var selValue = dropdown.options[dropdown.selectedIndex].value;
But if you want to get the text ΝΟΤ the value , you do:
var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
var selText = dropdown.options[dropdown.selectedIndex].text;
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
For getting the value you can use
document.querySelector('#qtySelect option:checked').value;
For getting the actual text inside the option you can use
document.querySelector('#qtySelect option:checked').text;