Here is my index file code. whenever I select something into the drop-down then show me related dropdown.
I put this code in my file but I can't get drop down after selecting the main type.
css file code is .hide{display:none;}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#mode').on('change', function () {
var value = $("#mode option:selected").val();
$('.hide').slideUp('fast').find('select').val('');
$('#' + value).show('slow');
});
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="">
<label class="control-label">Mode</label>
<select class="input-large m-wrap" name="mode" id="mode" required>
<option value=""></option>
<option value="general">General Knowledge</option>
<option value="preparatory">Preparatory Exam</option>
</select>
</div>
<div class=" hide" id="general">
<br>
<label class="control-label">Module</label>
<select class="input-large m-wrap" name="module" id="sub">
<option value=""></option>
<option value="Module 1">Module 1</option>
<option value="Module 2">Module 2</option>
</select>
</div>
<div class=" hide" id="preparatory">
<br>
<label class="control-label">Exam</label>
<select class="input-large m-wrap" name="exam" id="sub">
<option value=""></option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</div>
</body>
</html>
Your problem is type class=" hide" change to class="hide"
and you need move your script to before close body tag not head tag.
$('#mode').on('change', function () {
var value = $("#mode option:selected").val();
//$('.hide').show();
$('.hide').slideUp('fast').find('select').val('');
$('#' + value).show('slow');
});
.hide{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="">
<label class="control-label">Mode</label>
<select class="input-large m-wrap" name="mode" id="mode" required>
<option value=""></option>
<option value="general">General Knowledge</option>
<option value="preparatory">Preparatory Exam</option>
</select>
</div>
<div class="hide" id="general">
<br>
<label class="control-label">Module</label>
<select class="input-large m-wrap" name="module" id="sub">
<option value=""></option>
<option value="Module 1">Module 1</option>
<option value="Module 2">Module 2</option>
</select>
</div>
<div class=" hide" id="preparatory">
<br>
<label class="control-label">Exam</label>
<select class="input-large m-wrap" name="exam" id="sub">
<option value=""></option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</div>
</body>
</html>
Related
I am new to jquery & js. I am using a flask application for my mini project.
I am calling the loding.gif file via js/jquery script. it is working like when I hit submit button in html loding.gif file is called, but it is showing below to the submit button itself.
I want like 'if I hit submit button in html, only loding.gif as to show' other content like form name dropdown, everything has to hide.
what I need to change?
index.html
<!DOCTYPE html>
<html lang="en">
<html><head>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<div class="content">
<h1>The select form attribute</h1>
<right>
<!--<img src="https://media.giphy.com/media/l1J9LIsJB4xHMzLLq/giphy.gif">-->
</right>
<div class="zoom"></div>
<form method="POST" id="carform">
<label for="uname">Firstname:</label>
<input type="text" id="uname" name="uname">
<br>
<select id="cars" name="carfs">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<br>
<select id="image" name="image">
<option value="volvo">Volvo XC90</option>
<option value="debian">debian</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<!--<input type="submit" value="Submit">-->
<input type="submit" name="anything_submit" value="Submit" onclick="$('#loading').show();">
</form>
<div id="loading" style="display:none;"><img src="{{url_for('static', filename='loder.gif')}}" alt="loading......" />Loading...!</div>
<br>
</div>
</body>
</html>
You can wrap your form inside a div and hide it when you submit your form. So, there's not much more to be added. Take a look:
$('#submit_leave_email').submit(function(e) {
$("#will_hide").hide();
$('#loading').show();
setTimeout(()=>{
$('#loading').replaceWith("<img src='https://c.tenor.com/Kt8pNHXHLKwAAAAC/module-free.gif' width='100'>");
}, 3000)
e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="will_hide">
<form id='submit_leave_email' method='post'>
<label for="uname">Firstname:</label>
<input type="text" id="uname" name="uname">
<br>
<select id="cars" name="carfs">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<br>
<select id="image" name="image">
<option value="volvo">Volvo XC90</option>
<option value="debian">debian</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<button type='submit' class='input_button' value='submit'>Insert </button>
</form>
</div>
<div id="loading" style="display:none">
<p>Loading...!</p>
</div>
</body>
Notice that I used the setTimeout just to simulate the delay of backend's response and e.preventDefault() to avoid submitting the form from here.
My function below is logging one value to console instead of 2 values. Ultimately My project will have multiple select elements and I need to pass the value of each select element through a function.
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<button id="logvalues" type="submit" class="btn btn-success">log values to console</button>
Javascript:
$("#logvalues").click(function() {
$("option:selected").each(function(){
console.log($("option:selected").val());
});
})
You just need to pass the current context using this like:
$("#logvalues").click(function() {
$("option:selected").each(function() {
console.log( $(this).val() );
});
})
Demo:
$("#logvalues").click(function() {
$("option:selected").each(function() {
console.log($(this).val());
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<div class="choice">
<select name="selecttype">
<option value="0">choice 1</option>
<option value="1">choice 2</option>
<option value="" selected>N/A</option>
</select>
</div>
<button id="logvalues" type="submit" class="btn btn-success">log values to console</button>
I'm looking for a way to implement a custom select field that has a functionality of several select fields (each one has only one selectable entry). I didn't find any way to merge all the select fields into one, either nor way to allow one selection per form category.
Here is what I have
Here is what I am trying to achieve
Example of my current structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.table > tbody > tr > td {
text-align: center;
vertical-align:middle;
}
.col-xs-2 {
padding-top: 10%;
padding-left: 10%;
}
</style>
</head>
<body>
<div class="form-group">
<div class="col-sm-3">
<label for="color" >Color:</label>
<select class="form-control" id="color" >
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="col-sm-3">
<label for="style">Style:</label>
<select class="form-control" id="style" >
<option value="square" >Square</option>
<option value="sphere">Sphere</option>
</select>
</div>
<div class="col-sm-3">
<label for="size" >Size:</label>
<select class="form-control" id="size" >
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</select>
</div>
</div>
</body>
Update: I found a jQuery plugin that does this for you. It is called Bootstrap-select. Check it out here: https://silviomoreto.github.io/bootstrap-select/
This plugin converts a <select> into a Bootstrap Dropdown. One of its features is that you can have a <select multiple>...</select> with <optgroup>(explained below) and you can set the max number of selections per <optgroup> using a data-max-options attribute. So you can just set it to 1 for each <optgroup>. Here is the documentation for that feature: https://silviomoreto.github.io/bootstrap-select/examples/#limit-the-number-of-selections
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<div class="container">
<select class="selectpicker" multiple>
<optgroup label="Color" data-max-options="1">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</optgroup>
<optgroup label="Style" data-max-options="1">
<option value="square" >Square</option>
<option value="sphere">Sphere</option>
</optgroup>
<optgroup label="Size" data-max-options="1">
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</optgroup>
</select>
</div>
Old solution 1:
I think you want to use <optgroup>s to contain multiple groups of <option>s into one <select>. And to make sure you can select more than one option, you need to add the multiple Boolean attribute to your <select>. However, you still need to make it so you can only select a maximum of one <option> per <optgroup>. The answer from this question provides a good piece of javascript code that does that.
Here is a demo that I put together. Hold Control on your keyboard to select multiple options. Notice that if you try to select another option from the same <optgroup>, the previous selection will be de-selected.
$('select optgroup option').click(function() {
$(this).siblings().prop('selected', false);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<select class="form-control" multiple style="width:200px;height:400px;">
<optgroup label="Color">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</optgroup>
<optgroup label="Style">
<option>Square</option>
<option>Sphere</option>
</optgroup>
<optgroup label="Size">
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</optgroup>
</select>
</div>
Old solution 2
Here is a new solution that I created using Boostrap's Dropdowns. I created this one since the other solution isn't a dropdown so might not be what you are looking for. Let me know if it works for you.
$('.dropdown-menu li a').click(function() {
var groupId = $(this).attr('href');
$(groupId).val($(this).attr('data-sel'));
$(this).closest('.dropdown-menu').find('li a[href="'+groupId+'"]').removeClass('bg-success');
$(this).addClass('bg-success');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-header">Color</li>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Style</li>
<li>Square</li>
<li>Sphere</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Size</li>
<li>Tiny</li>
<li>Smallest</li>
<li>Small</li>
<li>Medium</li>
<li>Big</li>
<li>Biggest</li>
<li>Huge</li>
</ul>
</div>
<div class="form-group">
<div class="col-sm-3">
<label for="color" >Color:</label>
<select class="form-control" id="color" >
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="col-sm-3">
<label for="style">Style:</label>
<select class="form-control" id="style" >
<option value="square" >Square</option>
<option value="sphere">Sphere</option>
</select>
</div>
<div class="col-sm-3">
<label for="size" >Size:</label>
<select class="form-control" id="size" >
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</select>
</div>
</div>
</div>
I have a page that has to have multiple select boxes if needed. I'm using this plugin to style the selectbox.
$('body').on('click', '.add_option.add_title', function() {
$('.add_title_option').after($('.add_title_option .controls').html());
});
This is my javascript that I "clone" the selectbox and add it after it.
<div class="add_title_option">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<select id="title" name="title">
<option></option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
</select>
<a href="javascript:false;" class="add_option add_title">
<img src="<?=base_url();?>assets/img/add_options.png" alt="" />
</a>
</div>
<div class="error" id="title_error"></div>
</div>
</div>
It does "clone" itselfs, but the select is not functional.
How should I do it to add multiple selects through javascript?
$('body').on('click', '.add_option.add_title', function() {
$('.add_title_option').after($('#title').clone());
});
You need to use
$('.add_title_option').after($('.selectContainer select').clone().show());
Insted of
$('.add_title_option').after($('.add_title_option .controls').html());
In order to clone it, and set display from none to show.
Then you have to transform your select box with .selectBoxIt()
To customize it with this plugin.
Also, I have removed the id from select box to be sure we will not have dublicated ids.
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>
<script>
$(function() {
$(".titleSelect").selectBoxIt();
$('body').on('click', '#dublicateButton', function() {
$('.add_title_option').after($('.selectContainer select').clone().show().selectBoxIt());
});
});
</script>
</head>
<body>
<div class="add_title_option">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<div class="selectContainer" >
<select class="titleSelect" name="title">
<option></option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
</select>
</div>
<a href="javascript:void(null);" id="dublicateButton" class="add_option add_title">
click
</a>
</div>
<div class="error" id="title_error"></div>
</div>
</div>
</body>
</html>
I am trying to create a list that appears when the radio buttons are clicked, I am having a problem with the way the list appears once the button is clicked.
Here is the example http://jsfiddle.net/c2webdev/4bpKE/
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
.none {
display: none;
}
</style>
</head>
<body>
<input type="radio" name='thing' value='valuable' data-id="bank"/>Running Event
<input type="radio" name='thing' value='valuable' data-id="school"/>Other challenges
<input type="radio" name='thing' value='valuable' data-id="bakery"/>Baking
<div id="school" class="none">
<label for="name">What was the activity called?</label>
<select id="myList">
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
</select>
</div>
<div id="bank" class="none">
<label for="name">What was the activity called?</label>
<select id="myList">
<option value="1">Pancake Making</option>
<option value="2">Egg and spoon race</option>
<option value="3">Sack race</option>
<option value="4">Three leg race</option>
</select></div>
<div id="bakery" class="none">
<label for="name">What was the activity called?</label>
<select id="myList">
<option value="1">Pancake Making</option>
<option value="2">Egg and spoon race</option>
<option value="3">Sack race</option>
<option value="4">Three leg race</option>
</select></div>
<script>
$(':radio').change(function (event) {
var id = $(this).data('id');
$('#' + id).addClass('none').siblings().removeClass('none');
});
</script>
</body>
</html>
Please help
I added a class name .select to your select containers. If you added another radio in the future, this way fill it. So:
CSS:
.select {
display: none;
}
JS:
$('input[type="radio"]').click(function (event) {
$(".select").hide();
var id = $(this).data('id');
$('#' + id).show();
});
HTML:
<input type="radio" name='thing' value='valuable' data-id="bank" />Running Event
<input type="radio" name='thing' value='valuable' data-id="school" />Other challenges
<div id="school" class="select">
<label for="myList1">What was the activity called?</label>
<select id="myList1">
<option value="1">Virgin London Marathon</option>
<option value="2">Round the Island cycle challenge</option>
<option value="3">Kilimanjaro trek</option>
<option value="4">Thames Path Challenge</option>
</select>
</div>
<div id="bank" class="select">
<label for="myList2">What was the activity called?</label>
<select id="myList2">
<option value="1">Pancake Making</option>
<option value="2">Egg and spoon race</option>
<option value="3">Sack race </option>
<option value="4">Three leg race</option>
</select>
</div>
See Demo by jquery enabled
You didn't set a library, e.g. jQuery on the left pane