I have following code for drop down select showing drop down list using text and values.i google many codes as possible but none of them worked.what i wanted to show the selected drop down menu item in alert dialog.I already tried jquery and javascript codes but they are not working please help me to out of this problem
<div class="col-sm-1"></div>
<div class="col-sm-3">
<div class="fleft " id="drop-down">
<select id="cd-dropdown" class="cd-select" >
<option value="1" >Home</option>
<option value="2" >Movies</option>
<option value="3" >T.V. Shows</option>
<option value="4" >Photos</option>
<option value="5" >Site Help</option>
</select>
</div>
</div>
Using JQuery, you could do something like this:
$('#cd-dropdown').bind('change', function () {
alert($(this).find('option:selected').text());
});
If you want the value instead of the text, use .val()
on changing
$(document).ready(function(){
$("#cd-dropdown").change(function(){
alert($(this).find('option:selected').val()); // val or text
});
});
or on loading
$(document).ready(function () {
alert($("#cd-dropdown").find('option:selected').val()); // val or text
});
Updated link
HTML code:
<div class="col-sm-1"></div>
<div class="col-sm-3">
<div class="fleft " id="drop-down">
<select id="cd-dropdown" class="cd-select" onmousedown="this.value='';" onchange="jsFunction(this.value);" >
<option value="1" >Home</option>
<option value="2" >Movies</option>
<option value="3" >T.V. Shows</option>
<option value="4" >Photos</option>
<option value="5" >Site Help</option>
</select>
</div>
</div>
JS code:
function jsFunction(value)
{
alert(value);
}
You can do so using jQuery like this
$(document).on('change',"#cd-dropdown", function(){
alert($(this).val()); // will display selected option's value
alert($(this).find('option:selected').text()); //will display selected option's text
});
Related
I have this jquery to check a radio button on page load:
$('input[value="modelos"]').attr('checked',true);
And then I have a dropdown list:
<select id="talents_meta_category" name="talents_meta_category">
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
How can I have input[value="modelos"] checked only if and when <option value="tab_1495127126289">Modelos</option> is selected?
You need on change condition with if like this :
$("select#talents_meta_category").change(function () {
if ($(this).val() === "tab_1495127126289") {
$('input[value="modelos"]').attr('checked',true);
}else{
$('input[value="modelos"]').attr('checked',false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option value="">Please Select</option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
</br>
<input type="checkbox" name="modelos 1" value="modelos"> modelos 1<br>
<input type="checkbox" name="modelos 2" value="modelos"> modelos 2<br>
<input type="checkbox" name="modelos 3" value="modelos"> modelos 3<br>
Checkbox dynamically change based on condition (select option value)
You can try this, but I had to put in a blank option into the menu, however if that's unacceptable let me know and I'll do something else.
$("select#talents_meta_category").change(function () {
if ($(this).val() === "tab_1495127126289") {
$('input[value="modelos"]').attr('checked',true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option></option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
<input type="radio" value="modelos">
You can check whether a option by testing the value attribute of the select
$(function(){
if($('#talents_meta_category').val()){
$('input[name="favorites"][value="modelos2"]').attr('checked',true);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option value=""></option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463" selected>Música</option>
</select>
<label for="modelos"><input type="radio" name="favorites" value="modelos"></label>
<label for="modelos"><input type="radio" name="favorites" value="modelos2"></label>
You can use onchange function.
$("#talents_meta_category").on('change',function(){
let value = $(this).children("option:selected").val();
if(value=="tab_1495127126289"){
$('input[value="modelos"]').attr('checked',true);
}else{
$('input[value="modelos"]').attr('checked',false);
}
});
Something like this should do the trick:
// Your check the radio on page load
$('input[value="modelos"]').attr('checked', true);
// Check if `modelos` is selected
if ($('input[value="modelos"]').prop('checked')) {
// Add the `selected` attribute to the <option />
$('option[value="tab_1495127126289"]').attr('selected', true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' value='modelos' />
<select id="talents_meta_category" name="talents_meta_category">
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
Hope this helps,
You can do it many different ways, here is just one....
var checkMe = 'tab_1495127126289';
$(function(){
$('input[name=talents_meta_category][value=' + checkMe + ']').prop('checked',true)
});
I dynamically created a div with select options in jQuery. Here's a sample.
<div id="myDiv">
<select id="mySelect">
<option selected value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
</div>
0 is the default selected value.
When I get html of the div like this $("#myDiv").html(), it gets the below.
<div id="myDiv">
<select id="mySelect">
<option selected value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
</div>
It's the same as the above code which is normal.
However, when I change the selected value to 2, $("#myDiv").html() is still getting same code. 0 is still the selected value.
How can I get the html of the div, with the dynamically changed value?
You can do this :
$('#yourSelect option:selected').val()
Maybe like this:
function create_select(){
var select=$('<select/>').attr('id','mySelect');
var option0=$('<option/>').val(0).text('A').attr('selected', true);
select.append(option0);
var option1=$('<option/>').val(1).text('B');
select.append(option1);
var option2=$('<option/>').val(2).text('C');
select.append(option2);
var option3=$('<option/>').val(3).text('D');
select.append(option3);
$('#myDiv').empty().append(select);
}
function change_select_value(_new_val){
$('#mySelect option').removeAttr('selected');
$('#mySelect').val(_new_val).change();
}
$(document).on('change', '#mySelect', function(){ //conctruction for Dynamically created element
alert('change value to =>'+this.value); //or $(this).val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="myDiv"></div>
<input type="button" value="Create Select" onclick="create_select();" /></br>
<input type="button" value="Set option C (value=2)" onclick="change_select_value(2);" /></br>
$('#myDiv').find("#mySelect").change(function () {
alert($("#mySelect option:selected").text());
alert($("#mySelect option:selected").val());
});
I have this code:
<select>
<option disabled selected>Select Method</option>
<option value="question">Question</option>
<option value="password">Password</option>
<option value="email">Email</option>
<option value="none">None</option>
</select>
Now I want when user select each of them some div that hidden in css with display:none; get visible for example when user select Question the div that have question id get visible or when Password selected the div that have password id get visible.
I try this but not work:
$(document).ready(function(){
if ($("#auth option:selected").text() == "question"){
$("#question").css("display","block");
}
});
So how can I do this?
If you follow the pattern you have done so far, you have to write code for each option. If your options and div elements are coupled with value and id, you can simply do like this,
$("select").change(function() {
$("div").hide();
$("#" + $(this).val()).show();
});
Demo Fiddle
Here is Demo for this , remove disabled from select tag so that user can select the options
Jsfiddle
http://jsfiddle.net/adarshkr/z9gcf40r/2/
Code
HTML
<select id="showdiv">
<option disabled selected>Select Method</option>
<option value="question">Question</option>
<option value="password">Password</option>
<option value="email">Email</option>
<option value="none">None</option>
</select>
<div id="question" class="hide">
<p>question</p>
</div>
<div id="password" class="hide">
<p>password</p>
</div>
<div id="email" class="hide">
<p>email</p>
</div>
<div id="none" class="hide">
<p>none</p>
</div>
CSS
.hide{
display:none
}
JAVASCRIPT
$("select").change(function(){
$("div").hide();
$("#"+$(this).val()).show();
});
try this,
$('#auth').on('change', function() {
var that = $(this).val();
if (that === "question"){
$("#question").css("display","block");
}
});
Better check value than the text.
$(document).ready(function(){
if ($("#auth option:selected").val() == "question"){
$("#question").css("display","block");
}
});
I want to design a form,on which I want to select multiple data from list and then on button click I want to add that data to multiple checkbox.Please can anybody provide me any java script function or something else
Thanks in advance.
As a start point try using jQuery.
HTML:
<select type="multiple" id="mylist">
<option value="1" selected="selected">one</option>
<option value="2">two</option>
<option value="3" selected="selected">three</option>
<option value="4">four</option>
<option value="5" selected="selected">five</option>
<option value="6">six</option>
</select>
<div id="checkboxcontainer"></div>
<input type="button" id="clicker" value="clicker" />
JAVASCRIPT:
<script type="text/javascript">
$(function(){
$("#clicker").click(function(){
$("#checlboxcontainer").empty();
$("#mylist option:selected").each(function(){
$("#checlboxcontainer").append('<label><input type="checkbox" value="'+$(this).val()+'" /> '+ $(this).text() +' </label><br />');
});
});
});
</script>
These are Dynamic dependent select controls. The sets of values of (1-3, 4-6, 7-9) determine the use hide/show divs function. The problem is the function i have only hide/show depending on the div id. How can i make the function hide/show div depended on the values(1-3, 4-6, 7-9) found in the selectbox?
Jquery
$('#select').change(function() {
$('#sub1, #sub2, #sub3').hide();
$('#sub' + $(this).find('option:selected').attr('id')).show();
});
Html Setup
<html>
<select size="6" id="category">
<option value="">categories 1-3 </option>
<option value="">----</option>
<option value="">----</option>
</select>
<div id="sub1" style="display:none">
<select name="subc1" size="6">
<option value="1">subcategories 4-6</option>
<option value="2">---</option>
<option value="3">---</option>
</select>
</div>
<div id="sub2" style="display:none">
<select name="subc2" size="6">
<option value="4">subcategories 7-9</option>
<option value="5">----</option>
<option value="6">----</option>
</select>
</div>
<div id="sub3" style="display:none">
<select name="subc3" size="6">
<option value="7">End</option>
<option value="8">----</option>
<option value="9">----</option>
</select>
</div>
</html>
select the value from drop down change function and do the operation depends on the value of drop down, following is the sample code
$(function() // Shorthand for $(document).ready(function() {
$('select').change(function() {
if($(this).val() == 1)
{
$('#sub1').hide();
$('#sub2').show();
}
});
});
You nee to change minor change in your category select
<select size="6" id="category">
<option value="1">categories 1-3 </option>
<option value="2">----</option>
<option value="3">----</option>
</select>
$('select#category').on('change', function() {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
});
can also use .change() instead of .on('change').
$('select#category').change(function() {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
});
NOTE:
$('div[id=^sub]:visible') will point to all divs that have id start with sub and visible.
You are trying with $('#select') which need to be $('#category') or $('select#category').
According to your comment:
Complete solution will look like following:
function isOnlyDashed(text) {
return text.replace(/-/g, '').length === 0;
}
$('select#category').change(function() {
var text = $('option:selected', this).text();
if (!isOnlyDashed(text)) {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
}
});
$('select[name^=subc]').change(function() {
var text = $('option:selected', this).text();
if (!isOnlyDashed(text)) {
$(this).parent() // jump to parent div
.next('div[id^=sub]:hidden') // go to next hidden div
.show();
}
});
Complete Workout
The problem with your code is that you have an incorrect selector.
$('#select')...
should be
$('select')...
Also, this part is wrong
$('#sub' + $(this).find('option:selected').attr('id')).show();
Replace it with this
$('#sub' + $(this).val()).show();
Finally, having different elements with the same name/id "sub1" is probably a bad idea, though technically not illegal. It is certainly confusing.
working demo http://jsfiddle.net/FwBb2/1/
I have made minor changes in your Jquery code as well as added value in your first select drop-down list which was missing rest hope this helps.
Please lemme know if I missed anything! B-)
code
$('select').change(function() {
$('#sub1, #sub2, #sub3').hide();
$('#sub' + $(this).val()).show();
});
HTML
<html>
<select id="category">
<option value="1">categories 1-3 </option>
<option value="2">----</option>
<option value="3">----</option>
</select>
<div id="sub1" style="display:none">
<select name="subc1" size="6">
<option value="1">subcategories 4-6</option>
<option value="2">---</option>
<option value="3">---</option>
</select>
</div>
<div id="sub2" style="display:none">
<select name="subc2" size="6">
<option value="4">subcategories 7-9</option>
<option value="5">----</option>
<option value="6">----</option>
</select>
</div>
<div id="sub3" style="display:none">
<select name="subc3" size="6">
<option value="7">End</option>
<option value="8">----</option>
<option value="9">----</option>
</select>
</div>
</html>