Related Radio buttons and Drop down list - javascript

i am trying to make a form, in which i have a number of radio buttons (created dynamically), and a drop down list.
In the drop down list i have numbers.
I want the drop down list to depend on the radio button currently pressed, meaning that, if i press the first button, the maximum number appearing in the drop down list will be a value x, if i press another radio will be a value y. This values represent a php variable.
What is the easiest way to do this thing?
Thank you!
Editing:
i tried:
<html>
<head>
<style>
#ca {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("input:radio").click(function() {
$('.searchSelect').hide();
$('#' + $(this).attr("value")).show();
});
});
</script>
</head>
<body>
<ul id="countrylist">
<li>
<label for="US-country">
<input name="store" id="US-country" type="radio" value="com" checked="checked" />
USA</label>
</li>
<li>
<label for="CA-country">
<input name="store" id="CA-country" type="radio" value="ca"/>
Canada</label>
</li>
</ul>
<select name="search-alias-us" id="com" class="searchSelect" title="Search in">
<option value="aps" selected="selected">All Departments</option>
<option value="apparel">Apparel & Accessories</option>
<option value="automotive">Automotive</option>
</select>
<select name="search-alias-ca" id="ca" class="searchSelect" title="Search in">
<option value="aps" selected="selected">All Departments</option>
<option value="stripbooks">Books</option>
<option value="popular">Music</option>
</select>
</body>
</html>
also included : the jquery 1.5 library . still, the drop down list does't change on radio button click.
thank you!

I'm not sure if I understand your question right but I once made something similar, what I did was output all dropdownlists and hid them with css then on clicking the radiobutton unhid the dropdownlist I needed using jquery
http://jsfiddle.net/6svcD/
It can be even shorter with show() and hide()
$(function() {
$("input:radio").click(function () {
$('.searchSelect').hide();
$('#' + $(this).attr("value")).show();
});
});
The whole page below or here: http://jsfiddle.net/MrAGF/1/
<html>
<head>
<style>
#ca {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("input:radio").click(function() {
$('.searchSelect').hide();
$('#' + $(this).attr("value")).show();
});
});
</script>
</head>
<body>
<ul id="countrylist">
<li>
<label for="US-country">
<input name="store" id="US-country" type="radio" value="com" checked="checked" />
USA</label>
</li>
<li>
<label for="CA-country">
<input name="store" id="CA-country" type="radio" value="ca"/>
Canada</label>
</li>
</ul>
<select name="search-alias-us" id="com" class="searchSelect" title="Search in">
<option value="aps" selected="selected">All Departments</option>
<option value="apparel">Apparel & Accessories</option>
<option value="automotive">Automotive</option>
</select>
<select name="search-alias-ca" id="ca" class="searchSelect" title="Search in">
<option value="aps" selected="selected">All Departments</option>
<option value="stripbooks">Books</option>
<option value="popular">Music</option>
</select>
</body>
</html>

Related

Show selected options as the bootstrap dropdown menu in Html & JavaScript

Is it possible to create a multi-select checkbox dropdown like this in Bootstrap, HTML and JavaScript.
I have tried I couldn't able to achieve it. I'm new to JavaScript as well However I'm just exploring the JS and make it to work but this seems really challenging for me. I don't know how to implement JS script for this.
For instance: If the user selects the countries in the multiselect checkbox I want it to show it all countries name instead of Choose option.
code:
<div>Country</div>
<div class="row" name="country_checkbox" id="id_row">
<div class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">
<span id="selected">Choose option</span><span class="caret"></span></a>
<ul id="id_country">
<li><label for="id_country_0"><input type="checkbox" name="country" value="US"
placeholder="Select Country" id="id_country_0" onclick="filter_type();">
US</label>
</li>
<li><label for="id_country_1"><input type="checkbox" name="country" value="India"
placeholder="Select Country" id="id_country_1" onclick="filter_type();">
India</label>
</li>
<li><label for="id_country_2"><input type="checkbox" name="country" value="Japan"
placeholder="Select Country" id="id_country_2" onclick="filter_type();">
Japan</label>
</li>
<li><label for="id_country_3"><input type="checkbox" name="country" value="UK"
placeholder="Select Country" id="id_country_3" onclick="filter_type();">
UK</label>
</li>
</ul>
</div>
js fiddle here: http://jsfiddle.net/shalman44/92drs7ax/3/
Since you are already using bootstrap, you might aswell want to use jQuery.
There is a plugin called bootstrap-select for achieving a multi select like in your example, where the syntax is as follows:
<select class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
$(function () {
$('select').selectpicker();
});
You might also want to have a look at this question.
I just searched google with "bootstrap multiselect" and i found this codepen
$(document).ready(function() {
$('#multiple-checkboxes').multiselect({
includeSelectAllOption: true,
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<div class="">
<strong>Select Language:</strong>
<select id="multiple-checkboxes" multiple="multiple">
<option value="php">PHP</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="sql">SQL</option>
<option value="jquery">Jquery</option>
<option value=".net">.Net</option>
</select>
</div>

append the multiple selected items from datalist to input tag with comma [duplicate]

In my Laravel app, I have a form to select multiple options. However, I don't want to select multiple options by pressing CTRL and then selecting them. I just want to be able simply click on the options and they should be selected. And, if I click on a selected option again, then it should be de-selected.
How can I achieve this task?
Here is an example of my select options list.
<div class="form-group row">
<label class="col-form-label" for="selectednames[]">Select Name</label>
</div>
<div class="form-group row">
<select multiple name="selectednames[]">
<option value="1">John</option>
<option value="2">Sam</option>
<option value="3">Max</option>
<option value="4">Shawn</option>
</select>
P.S: I am using bootstrap and jquery in my application.
simply use checkbox type as input instead of option, like that:
<div class="form-check">
<input type="checkbox" name="selectednames[]" value = "1" />
<input type="checkbox" name="selectednames[]" value = "2" />
<input type="checkbox" name="selectednames[]" value = "3" />
<input type="checkbox" name="selectednames[]" value = "4" />
</div>
I think you want somethings like this :
$('select[multiple]').multiselect()
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
</head>
<body>
<select multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
</body>
</html>

selecting specific element within one parent

This is my HTML form structure:
EDIT: Each section is generated by PHP script, and the section id will change depending on user input. I am not able to use the whole selector because of this
<section id="JaneDoe">
<div class="gcolumn1">Jane Doe</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="Y">Yes
<input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
<select id="Meal[]" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
<section id="JohnSmith">
<div class="gcolumn1">JohnSmith</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="Y">Yes
<input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
<select id="Meal[]" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
</section>
I'd like for the dropdown Meal[] to be enabled only after the chk_food[] is selected as yes. However, I am having some trouble figuring out how to tell jQuery to enable only the dropdown box within the same section.
I currently have this as the jQuery: (I added the alert boxes to see which part of the code is not working)
var update_meal = function () {
alert ("Hi");
var sec_id = $(this).closest("section").attr("id");
alert (text(sec_id));
if ($(sec_id + "> #chk_food[]").is(":checked")) {
$(sec_id + "> #Meal[]").prop('disabled', false);
} else {
$(sec_id + "> #Meal[]").prop('disabled', 'disabled');
}
};
$(update_meal);
$("#chk_food[]").change(update_meal);
When I tried to run this on JSFiddle, no bugs show up, but the coding doesn't work at all.
I see the alert box popping up with "Hi" as soon as the document loads
Thank you for your help
You can't have multiple elements on the same page with the same ID. It is invalid HTML and it will confuse your code terribly. To get this to work, you first need to use classes to find things:
<section>
<div class="gcolumn1">JohnSmith</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JohnSmith-chk_food[]" class="chk_food yes" value="Y">Yes
<input type="radio" name="JohnSmith-chk_food[]" class="chk_food no" value="N">No
</div>
<div class="gcolumn3">
<select name="Meal[]" class="meal" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
</section>
Then you can start to target things correctly. Something like this:
$(".chk_food").on("change", function() {
$(this)
.closest("SECTION")
.find("SELECT.meal")
.prop("disabled", $(this).is(".no"));
});
In this case, we bind the change handler on both the Yes and No food radios. The handler will be called for the one the user clicks on, so they are inherently turning that one "on". So we find the parent section, and then the meal select within it, and set its disabled property to true if this is the .yes radio and false if this is the .no radio.
I think that should do it.

How to change background with a dropdown using javascript

Hi im not currently that great at JavaScript and i have ran into a problem. im making a website to show off what i can do and in the section where i will show layouts i want to have options so they can change the colours of the page to see what it looks like. Now i have done this using radio buttons and it works great but i want to put it into a a drop down to make it look better.
The code with radio buttons:
<form action="">
<input onclick="change_color_body_blue()" type="radio" name="Content_body_color"/>Blue
<input onclick="change_color_body_green()" type="radio" name="Content_body_color"/>Green
<input onclick="change_color_body_red()" type="radio" name="Content_body_color"/>Red
<input onclick="change_color_body_yellow()" type="radio" name="Content_body_color"/>Yellow
<input onclick="change_color_body_orange()" type="radio" name="Content_body_color"/>Orange
<input onclick="change_color_body_purple()" type="radio" name="Content_body_color"/>Purple
<input onclick="change_color_body_brown()" type="radio" name="Content_body_color"/>Brown
<input onclick="change_color_body_cream()" type="radio" name="Content_body_color"/>Cream
<input onclick="change_color_body_pink()" type="radio" name="Content_body_color"/>Pink
<input onclick="change_color_body_hotpink ()" type="radio" name="Content_body_color"/>HotPink
<input onclick="change_color_body_black()" type="radio" name="Content_body_color"/>Black
<input onclick="change_color_body_white()" type="radio" name="Content_body_color"/>White
</form>
Now for the code with the dropdown
<form action="">
<select>
<option onchange="change_color_body_blue()" name="Content_body_color">Blue</option>
<option onchange="change_color_body_green()" name="Content_body_color">Green</option>
<option onchange="change_color_body_red()" name="Content_body_color">Red</option>
<option onchange="change_color_body_yellow()" name="Content_body_color">Yellow</option>
<option onchange="change_color_body_orange()" name="Content_body_color">Orange</option>
<option onchange="change_color_body_purple()" name="Content_body_color">Purple</option>
<option onchange="change_color_body_brown()" name="Content_body_color">Brown</option>
<option onchange="change_color_body_cream()" name="Content_body_color">Cream</option>
<option onchange="change_color_body_pink()" name="Content_body_color">Pink</option>
<option onchange="change_color_body_hotpink ()" name="Content_body_color">HotPink</option>
<option onchange="change_color_body_black()" name="Content_body_color">Black</option>
<option onchange="change_color_body_white()" name="Content_body_color">White</option>
</select>
</form>
I have tried onchange onclick and onselect but none work i have also added one of the events to the select tag this works but it will only change to 1 colour as only 1 of my functions can be entered can anyone see a way around this?
This should work.
<html>
<head>
</head>
<body>
<select onchange="javascript:changeColor(this);">
<option>Blue</option>
<option>Green</option>
<option>Red</option>
<option>Yellow</option>
<option>Orange</option>
<option>Purple</option>
<option>Brown</option>
<option>Cream</option>
<option>Pink</option>
<option>HotPink</option>
<option>Black</option>
<option>White</option>
</select>
<script>
function changeColor(el) {
var color = el.value;
document.body.style.background = color;
}
</script>
</body>
</html>

Drop down list item

I have a <select> field, which shows a hidden div on selecting a list item.
There are tree items in the <select> and each item shows the hidden div.
What I need is when I have selected the 3rd item and I refresh the page, the 3rd item should no longer be selected, but it should change to the 1st item.
I have tried selected="selected" in the <option> code but it did not work.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$("#column_select").change(function() {
$('div[id^=layout_select]').hide();
$('.'+this.value).show();
});
});
//]]>
</script>
</head>
<body>
<!-- this controls the selection of columns -->
<select name="column_selec" id="column_select">
<option value="col1" selected="selected">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<!-- this controls the selection of columns -->
<!-- if '1 column' is selected this div is shown -->
<div id="layout_select1" class="col1">You only have one column!</div>
<!-- if '2 column' is selected this div is shown -->
<div id="layout_select2" class="col2" style="display:none">
<input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay1" '.$layout1.' />imaage1
<input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay2" '.$layout2.' />imaage2 </div>
<!-- if '3 column' is selected this div is shown -->
<div id="layout_select3" class="col3" style="display:none">
<input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay3" '.$layout3.' />imaage3
<input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay4" '.$layout4.' />imaage4
<input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay5" '.$layout5.' />imaage5
</div>
try this code , this will select the first option in the drop down when page will refresh
$(document).ready(function(){
$('#column_select').val('col1');
});

Categories