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);
});
});
Related
I have tried to get the selected dropdown value based on some other input type text field using below code. However every time it gets the first value, i.e 15,
even when I have selected another option.
$(".director_code").keyup(function() { //this is Dropbox class selector
var schoolid = $("#schoolId").children(":selected").val();
// i also tried:
// $('#schoolId').find('option:selected').val();
console.log(schoolid);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="schoolId" id="schoolId" class="form-control schoolId" required="">
<option value="15">a</option>
<option value="16">b</option>
<option value="17">c</option>
<option value="18">d</option>
</select>
<input type="text" name="director_code" id="director_code" class="form-control director_code" pattern="[0-9]+" required="">
in snippet work perfectly but in my project not working well
show img
here i select second option i.e b but its display alert 15
but actual value of b is 16
Your code is working fine and as expected. On keyup event on input field, it is returning the selected option value.
What are you expecting then?
In the below screenshot, see the console log output w.r.t. input keyup logged with time.
You should try this
$("#schoolId").change(function(){
var selectedVal = $(this).children("option:selected").val();
$('#director_code').val(selectedVal)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="schoolId" id="schoolId" class="form-control schoolId" required="">
<option value="15">a</option>
<option value="16">b</option>
<option value="17">c</option>
<option value="18">d</option>
</select>
<input type="text" name="director_code" id="director_code" class="form-control director_code" pattern="[0-9]+" required="">
Based on your question maybe you want like this please check and let me know if something missed.
$(".director_code").keyup(function() {
try
{
var value = $(this).val();
//$("#schoolId").val($(this).val());
var oschoolId = $('#schoolId > option').filter(function () { return $.trim($(this).text()) == $.trim(value) }).val();
if(oschoolId!=undefined)
{
$('#schoolId').val(oschoolId);
console.log(oschoolId);
console.log($(this).val());
}
}catch(e)
{
console.log("Error: "+e.message);
}
});
$("#schoolId").change(function(){
var value= $(this).children("option:selected").text();
$('#director_code').val(value)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="schoolId" id="schoolId" class="form-control schoolId" required="">
<option value="15">a</option>
<option value="16">b</option>
<option value="17">c</option>
<option value="18">d</option>
</select>
<input type="text" name="director_code" id="director_code" class="form-control director_code" pattern="[0-9]+" required="">
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 have 4 select tag with class name select2 assigned to it. I want to make the border turn to red if there's no selected options or has an value equal to empty or 0. I've tried to add class using jquery but it makes all select.select2 border turns red.
Style
<style>
.errorType {
border-color: #F00 !important;
}
</style>
HTML
<select name="category" class="form-control select2" id="category" onChange="search_Operator(this.value)">
<option value="0"> Select Operator Category</option>
<option value="1">one</option> <option value="2"> two</option>
</select>
<select name="operatorName" class="form-control select2" id="operatorName" onChange="">
<option value="0"> Select operator Name</option>
<option value="1">one</option>
<option value="2"> two</option>
</select>
<select name="regionName" class="form-control select2" id="regionName">
<option value="0"> Select region Name</option>
<option value="1">one</option>
<option value="2"> two</option>
</select>
<select name="type" class="form-control select2" id="type">
<option value="0"> Select type </option>
</select>
JQUERY
$(function () {
$(".select2").select2();
});
$(".select2-selection").addClass('errorType');
Any idea?
Thanks in advance.
I've attached a function to the click event of the submit button, in order to check the value of every select element on the page:
$(function () {
$('.form-control-select2').select2();
$('#submit_btn').on('click', function(){
var submit_form = true;
$(".form-control-select2").each(function(){
var selected_value = $(this).val();
if (selected_value==0 || selected_value=='') {
$(this).next().find('.select2-selection').addClass('errorType');
submit_form = false;
} else {
$(this).next().find('.select2-selection').removeClass('errorType');
}
});
return submit_form;
});
});
Fiddle here: https://jsfiddle.net/64a41thz/21/.
Also, if you want to remove the red border when valid selection is made, add the following code:
$('.form-control-select2').on('change', function(){
if ($(this).val()!=0 && $(this).val()!='') {
$(this).next().find('.select2-selection').removeClass('errorType');
}
});
Fiddle here: https://jsfiddle.net/64a41thz/24/.
This does the trick. You just need to replace #yourButton with the actual ID you use.
$(document).on("click", "#yourButton", function() {
$(".select2").each(function(index, element) {
$(element).removeClass("errorType");
if ($(element).val() === "0") {
$(element).addClass("errorType");
}
});
});
Put your select tag inside a form with an id="submit" as shown
<form class="" action="" method="post" id="submit">
and add a button below the 4 select tags with this attribute
onclick="return submit_form('form#submit')"
the button should be like this,
<button type="button" class="btn btn-default" onclick="return submit_form('form#submit')">Submit</button>
In your jquery
function submit_form (form_id) {
$(form_id).find('select[name]').each(function (index, node) {
if (node.value == 0) {
var id = "select#" + node.id;
$(id).addClass('errorType');
}
});
}
This will search select tag with name as attribute, if found, it will get the value of the name and check of its empty or not. If found empty it will add new class that turns that select tag into a red border.
Hope this will help
I'm trying to get the selected text, not value, from my bootstrap drop down, but my .text() statement is returning a string that contains all the values with a '\n' in between.
Here is my rendered html
<select class="form-control" id="SpaceAccommodation" name="YogaSpaceAccommodation">
<option selected="selected" value="0">1-4</option>
<option value="1">5-9</option>
<option value="2">10-15</option>
<option value="3">16-20</option>
<option value="4">20+</option>
</select>
Here is my javascript, but selectedText returns '5-9\n10-15\n16-20\n20+'
I want it to return 5-9 or 10-15, etc..
$('#SpaceAccommodation').change(function () {
var selectedText = $(this).text();
});
You can get the selected value's text with $(this).find("option:selected").text().
$('#SpaceAccommodation').change(function () {
var selectedText = $(this).find("option:selected").text();
$(".test").text(selectedText);
});
<script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<select class="form-control" id="SpaceAccommodation" name="YogaSpaceAccommodation">
<option selected="selected" value="0">1-4</option>
<option value="1">5-9</option>
<option value="2">10-15</option>
<option value="3">16-20</option>
<option value="4">20+</option>
</select>
<div class="test"></div>
Fiddle for you
$(document).ready(function () {
$('.chzn-select').change(function () {
alert( $('.chzn-select option:selected').text());
});
});
<select id="second" class="chzn-select" style="width: 100px">
<option value="1">one</option>
<option value="2">two</option>
</select>
This is based on the css3 psuedo-class :selected. It's very similar to :checked, I couldn't find docs for :selected
In case anyone cares, I've got another solution. I just looked at the arguments from the docs. You can do something like this (Assuming you've set the value tag of the option element.:
$('#type_dropdown')
.on('changed.bs.select',
function(e, clickedIndex, newValue, oldValue) {
alert(e.target.value);
});
});
See https://silviomoreto.github.io/bootstrap-select/options/
Here is my code:
<select name="art_type">
<option value="ra">Research Article</option>
<option value="rea">Review Article</option>
<option value="re">Reviews</option>
<option value="op">Opinions</option>
<option value="le">Letters to the Editor</option>
</select>
<input style="border: none;" type="text" id="get_id_val" value="">
So whatever value user selects from the select box that value should be entered in the textbox.
How to do that?
Try
jQuery(function($){
var $idval = $('#get_id_val');
$('select[name="art_type"]').change(function(){
$idval.val($(this).val())
}).triggerHandler('change')
})
Demo: Fiddle
$("select").on("change", function(){
$("#get_id_val").val( this.options[this.selectedIndex].value );
});
Try this:
$('select[name=art_type]').on('change', function () {
var select = $(this).find('option:selected').val()
$('#get_id_val').val(select)
});
Demo here