I'm trying to select a specific option of these two select:
<select class="crs-country form-control required" name="country" id="customer-state" data-region-id="customer-region"></select>
<select id="customer-region" name="region" class="form-control required"></select>
using the following code:
$(document).ready(function() {
$('#customer-state option[value="Italy"]').prop("selected", true);
$('#customer-region option[value="Liguria"]').prop("selected", true);
})
but no chance to get this working. I also created a JSFIDDLE.
$(document).ready(function() {
$('#customer-state option[value="Italy"]').prop("selected", true);
$('#customer-region option[value="Liguria"]').prop("selected", true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://country-regions.github.io/country-region-selector/crs.min.js"></script>
<select class="crs-country form-control required" name="country" id="customer-state" data-region-id="customer-region"></select>
<select id="customer-region" name="region" class="form-control required"></select>
That is probably because the crs.min.js plugin you've loaded relies on listening to the onchange event on the <select> element in order to update the region dropdown. Therefore, if you trigger/dispatch the onchange event manually on the parent <select> element, then it should work:
$(document).ready(function() {
$('#customer-state option[value="Italy"]').prop("selected", true).parent().trigger('change');
$('#customer-region option[value="Liguria"]').prop("selected", true);
})
<script src="http://country-regions.github.io/country-region-selector/crs.min.js" id="crs"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="crs-country form-control required" name="country" id="customer-state" data-region-id="customer-region"></select>
<select id="customer-region" name="region" class="form-control required"></select>
Even better: You actually don't need to select the <option> element using jQuery: you can simply set the <select> element's value to the desired selected option, and the correct <option> will automatically be selected. I prefer this method because it makes your code a lot more readable, and slightly more performant as the browser does not have to traverse through all the nested <option> elements to match the attribute selector:
$(document).ready(function() {
$('#customer-state').val('Italy').trigger('change');
$('#customer-region').val('Liguria');
})
<script src="http://country-regions.github.io/country-region-selector/crs.min.js" id="crs"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="crs-country form-control required" name="country" id="customer-state" data-region-id="customer-region"></select>
<select id="customer-region" name="region" class="form-control required"></select>
Related
This question already has answers here:
jQuery selectors on custom data attributes using HTML5
(4 answers)
Closed 3 years ago.
<div id='participant-detail'>
<select class="form-control quantity" data-short-name="8">
</select>
<select class="form-control quantity" data-short-name="6">
</select>
</div>
In these given example, how am I supposed to get the value of the first select tag with the data-short-name of '8'?
I tried
$('#participant-detail .quantity').find("select[data-short-name='8']").val()
the '#participant-detail' is the id of the container(div) of those 2 select tags.
How to find or navigate to the specific tag and get its value?
Giving it an id is not advisable because those select tags were created from some conditions.
find() tries to find the select element inside $('#participant-detail .quantity') which itself is the element. Thus find() fails to target the element.
You do not need to use find(), you can specify the attribute selector as part of the main selector:
var val = $('#participant-detail select.quantity[data-short-name=8]').val();
console.log(val);
var val2 = $('#participant-detail select.quantity[data-short-name=6]').val();
console.log(val2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='participant-detail'>
<select class="form-control quantity" data-short-name="8">
<option value="1111">1111</option>
<option value="2222" selected>2222</option>
</select>
<select class="form-control quantity" data-short-name="6">
<option value="1111" selected>1111</option>
<option value="2222">2222</option>
</select>
</div>
use document.getElementById to select the div then querySelector to select the first child
let elem = document.getElementById('participant-detail').querySelector('select[data-short-name="8"]');
console.log(elem)
<div id='participant-detail'>
<select class="form-control quantity" data-short-name="8">
</select>
<select class="form-control quantity" data-short-name="6">
</select>
</div>
$('#participant-detail .quantity').find("select[data-short-name='8']") does not return any element as there is no child of #participant-detail .quantity selector with matching criteria select[data-short-name='8'].
You can try following approach to get the desired result.
console.log($('#participant-detail').find("select[data-short-name='8']").val());
console.log($('#participant-detail select.quantity[data-short-name="8"]').val());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='participant-detail'>
<select class="form-control quantity" data-short-name="8">
<option value="a">A</option>
</select>
<select class="form-control quantity" data-short-name="6">
<option value="b">B</option>
</select>
</div>
I want to display the value in a "select > option" in an based on the location selected from my tag.
Here is the html:
<select name="stateCoord" id="stateCoord" autocomplete="off">
<option selected="selected">SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo" readonly>
And here is the javascript:
$(document).ready(function() {
$("#stateCoord option").filter(function() {
return $(this).val() == $("#stateCoordInfo").val();
}).attr('selected', true);
$("#stateCoord").live("change", function() {
$("#stateCoordInfo").val($(this).find("option:selected").attr("value"));
});
});
I'm still getting the hang on javascript so a detailed explanation won't hurt. Thanks in advance.
If I assume correctly, you want this:
1) initialization of the select option at document ready, that strange thing the code with filter() was trying to do.
2) Capture the change event on the select and show the value of the current selected option on the input. This is what the live() (deprecated) part was trying to do.
$(document).ready(function()
{
$("#stateCoord").val("").change();
$("#stateCoord").change(function()
{
$("#stateCoordInfo").val($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="stateCoord" id="stateCoord">
<option value="" selected>SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo">
$(document).ready(function() {
$("body").on("change","#stateCoord",function() {
$("#stateCoordInfo").val($(this).find("option:selected").val());
});
$("#stateCoord").trigger("change");
});
From what I understand, you want to update the text shown in the readonly text box with the value attribute of the selected option from the dropdown.
To do this, you just need to update the val of your read-only text box to the val of the drop-down whenever change event is fired.
$(document).ready(function() {
$('#stateCoord').change(function(e) {
$('#stateCoordInfo').val($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="stateCoord" id="stateCoord" autocomplete="off">
<option selected="selected">SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo" readonly>
I am not sure, if this is what you need, but I think it should be: JSfiddle
Here is the JS code:
$(document).ready(function() {
$("#stateCoord").change(function() {
var value = $("#stateCoord option:selected").text();
$("#stateCoordInfo").val(value);
});
});
I tried to set readonly attribute to second select2 based on value of first select2 option.
I have my script as below:
<select name="Name" id="Name" style='width:45%'>
<option value="1">disable</option>
<option value="2">enable</option>
</select>
<select name="Name2" id="Name2" style='width:45%'>
<option value="d">David</option>
<option value="b">Bob</option>
</select>
My JS script is to set it is like below:
$(document).ready(function(){
$('#Name,#Name2').select2();
$('#Name').change(function(){
var val = $(this).val();
if(val==1)
{
$('#Name2').attr('readonly','readonly');
}else
{
$('#Name2').removeAttr('readonly');
}
})
})
However, the script above won't be working for select2 option but for textbox is fine. (Fiddlejs)
I tried to search some sources here but it did not help.
Thanks.
The above answers are not going to work with the updated versions of select2,
follow the link for the hack
https://stackoverflow.com/a/55001516/9945426
use .prop() to set disabled or not based on the value
$(document).ready(function() {
$('#Name').change(function() {
var val = $(this).val();
$('#Name2').prop('disabled', val == 1);//prop disabled
}).change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Name" id="Name" style='width:45%'>
<option value="1">disable</option>
<option value="2">enable</option>
</select>
<select name="Name2" id="Name2" style='width:45%'>
<option value="d">David</option>
<option value="b">Bob</option>
</select>
Use jQuery .prop() method like this
$('#Name2').prop("disabled", true) for disable and
$('#Name2').prop("disabled", false) for enabling select2.
Here is the (Fiddlejs)
I tried to set datepicker to be enable or disable datepicker according first selection. If user select option "Applied", I would like to set readonly attribute to field datepicker and not allow it to be popup calendar.
My sample below produce two fields: Application Selection and DatePicker Fields:
$(document).ready(function(){
$('#NextFollowDate').datepicker({
format:"yyyy-mm-dd"
});
$('#ActivityType').on('change',function()
{
var actType = $(this).val();
if (actType=='3')
{
$('#NextFollowDate').attr('readonly','readonly');
}
else
{
$('#NextFollowDate').removeAttr('readonly');
}
});
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<select class="form-control" id="ActivityType" name="ActivityType">
<option selected="" value="__None">--None--</option>
<option value="1">1 - First Appoinment</option>
<option value="2">2 - Second Appoinment</option>
<option value="3">3 - Applied</option>
</select>
<div class="form-group">
<label for="NextFollowDate" class="col-sm-2 control-label"><label for="NextFollowDate">Next Date</label></label>
<div class="col-sm-10">
<input class="form-control" id="NextFollowDate" name="NextFollowDate" type="text" value="" style="width: 214px;">
</div>
</div>
From readonly attribute does not stop DatePicker field from popup at all. Yet, setting $('#NextFollowDate').attr('disabled','disabled');, it would working fine. However, it is problematic when I submitted the form; therefore, I would like it to be readonly and prevent calendar from pop up.
Is there any way that I can archived that with readonly attribute? Thanks.
onchange I want to get the select option custom attribute and set to the other input's value. Somehow I cannot get the course_price in the input onchange of the select. It only shows the first option value in the input only.
function selectFunction(e) {
var value1 = $("#test").data('typeid'); //to get value
document.getElementById("money").value = value1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" onchange="selectFunction(event)">
<option id="test" data-typeid="<?php echo $row1['course_price']?>"
value="<?php echo $row1['course_id']?>"><?php echo $row1['course_name']?>
</option>
</select>
<input type="number" value="" id="money" class="form-control">
The issue is because the data-typeid attribute is on the selected option, not the select, so your jQuery code is looking at the wrong element. You can fix this by using find() and :selected to get the chosen option before reading the data attribute from it.
Also note that on* attributes are very outdated. You should be using unobtrusive event handlers, something like this:
$(function() {
$('select.form-control').change(function() {
var typeId = $(this).find('option:selected').data('typeid');
$("#money").val(typeId);
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
<option data-typeid="1111" value="courseId1">courseName1</option>
<option data-typeid="2222" value="courseId2">courseName2</option>
</select>
<input type="number" value="" id="money" class="form-control">
In your question you are using #test which is id for all options and so it will always consider first occurance of id test. So do not use same id multiple times on the same DOM, change it to class="test" if you need it, otherwise, you need to target the selected option, and it will not need any id or class. Check here:
var type_id = $('select option:selected').attr('data-typeid');
and assign the variable to input box:
document.getElementById("money").value =type_id;
So the entire updated function will be like this:
function selectFunction(e) {
var type_id = $('select option:selected').attr('data-typeid'); //to get value
document.getElementById("money").value =type_id;
}
Another way to make it:
$(document).on('change', 'select.form-control', function() {
var r = $('select.form-control option[value="'+$(this).val()+'"]').attr("data-typeid")
$("#money").val(r)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
<option selected disabled>-- Select one --</option>
<option data-typeid="1111" value="courseId1">courseName1</option>
<option data-typeid="2222" value="courseId2">courseName2</option>
</select>
<input type="number" value="" id="money" class="form-control">