I want to implement drop-down list with multiple group selection checkbox. There are a lot of options,so I use mysql to save them. How could i get data from mysql to use as option.I want to use php to retrieve data and they must be hierarchical tree structure.
I use this sample code, but option value is directly entered. How to make it display herarchical form as image below.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-
typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
/>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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" />
</head>
<body>
<div class="container" style="width:400px;">
<form method="post" id="framework_form">
<div class="form-group">
<label>Select which Framework you have knowledge</label>
<select id="framework" name="framework[]" multiple class="form-control">
<option value="Codeigniter">Codeigniter</option>
<option value="CakePHP">CakePHP</option>
<option value="Laravel">Laravel</option>
<option value="YII">YII</option>
<option value="Zend">Zend</option>
<option value="Symfony">Symfony</option>
<option value="Phalcon">Phalcon</option>
<option value="Slim">Slim</option>
</select>
</div>
</form>
<br />
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#framework').multiselect({
nonSelectedText: 'Thêm khách mời',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
buttonWidth: '400px'
});
});
</script>
Sorry for my bad English and Thanks for reading.
Related
<select class="selectpicker form-control" data-live-search="true" name = "name1" id ="id1">
<option>Option1</option>
<option>Option1</option>
<option>Option1</option>
<option>Option1</option>
</select>
How to trigger an alert on clicking bootstrap select live search input box ?
I tried with this, but its not working.
$(this).closest('.bootstrap-select').find('.bs-searchbox input').on('click',function(){
alert("live searching ..");
})
Any suggestions would be appreciated.
Thanks in advance.
Here is probably the correct Solution (probably):
Since the select-Tag is replace later(after the onload Event), so to be on the save side, so that it can be found "better" with a timeout.
I replace the alert call to a config.info call.
setTimeout(function(){
var newBox = $("#selectControl").get(0).parentNode;
$(newBox).find("input").on("click",function(){
console.info("live searching ..");
});
}, 1000);
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/css/base.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/css/custom.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/dist/css/bootstrap-select.min.css">
<div class="container">
<div>
<select class="selectpicker" data-live-search="true" id="selectControl">
<option data-tokens="Option 1">Option 1</option>
<option data-tokens="Option 2">Option 2</option>
<option data-tokens="Option 3">Option 3</option>
<option data-tokens="Option 4">Option 4</option>
</select>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js" >
</script>
<script src="https://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js" >
</script>
<script src="https://silviomoreto.github.io/bootstrap-select/dist/js/bootstrap-select.min.js">
</script>
</body>
btw.: details to te Control can be found in this Github, found it while google-ing
I keep getting this error in the below code on the last script line in my handlebars file "Javascript Error "Uncaught ReferenceError: selectMove is not defined"
Here is my update-pokemon.handlebars rendered from the console.
<html>
<head>
<title>Pokemon Database</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/boostrap/3.3.7/js/bootstrap.min.js></script>
<script src="/static/selectMove.js"></script>
<script src="/static/updatepokemon.js"></script>
</head>
<body>
<h1> Update sadfasdf: </h1>
<form id="update-pokemon" action="/pokemon" method="post">
Pokemon Name: <input type="text" name="pokemonname" value="sadfasdf"><br>
Evolution Level: <input type="text" name="evolutionlevel" value="0"><br>
Primary Move: <select name="movename" id="move-selector">
<option value="1">Vine Whip</option>
<option value="2">Razor Leaf</option>
<option value="3">Solar Beam</option>
<option value="4">Ember</option>
<option value="5">Flame Burst</option>
<option value="6">Flamethrower</option>
<option value="7">Bubble</option>
<option value="8">Water Gun</option>
<option value="9">Hydro Pump</option>
<option value="10">String Shot</option>
</select><br>
</form>
<button onclick="updatePokemon(13)">Update</button>
<script>selectMove(1);</script>
</body>
I think it may relate to the selectMove.js file that contains the selectMove function, which is below here
function selectMove(id) {
$("#move-selector").val(pokemonid);
}
Also here is my updatepokemon file
function updatePokemon(id) {
$.ajax({
url: '/pokemon/' + id,
type: 'PUT',
data: $('#update-pokemon').serialize(),
success: function(result) {
window.location.replace("./");
}
})
};
The first file is my handlebars file in my views directory, and the second is my selectMove.js located in the public directory.
EDIT - Here is my handlebars code
<h1> Update {{pokemon.pokemonname}}: </h1>
<form id="update-pokemon" action="/pokemon" method="post">
Pokemon Name: <input type="text" name="pokemonname" value="{{pokemon.pokemonname}}"><br>
Evolution Level: <input type="text" name="evolutionlevel" value="{{pokemon.evolutionlevel}}"><br>
Primary Move: <select name="movename" id="move-selector">
{{#each move}}
<option value="{{primarymoveid}}">{{primarymovename}}</option>
{{/each}}
</select><br>
</form>
<button onclick="updatePokemon({{pokemon.pokemonid}})">Update</button>
<script>$(function() {selectMove({{pokemon.movename}})});</script>
I think what's happening is your selectMove function from external JavaScript isn't loaded yet. Wrap the selectMove in $( document ).ready()
<script>$(function() { selectMove(1); });</script>
Try with it :
<html>
<head>
<title>Pokemon Database</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1> Update sadfasdf: </h1>
<form id="update-pokemon" action="/pokemon" method="post">
Pokemon Name: <input type="text" name="pokemonname" value="sadfasdf"><br>
Evolution Level: <input type="text" name="evolutionlevel" value="0"><br>
Primary Move: <select name="movename" id="move-selector">
<option value="1">Vine Whip</option>
<option value="2">Razor Leaf</option>
<option value="3">Solar Beam</option>
<option value="4">Ember</option>
<option value="5">Flame Burst</option>
<option value="6">Flamethrower</option>
<option value="7">Bubble</option>
<option value="8">Water Gun</option>
<option value="9">Hydro Pump</option>
<option value="10">String Shot</option>
</select><br>
</form>
<button onclick="updatePokemon(13)">Update</button>
<script src="https://maxcdn.bootstrapcdn.com/boostrap/3.3.7/js/bootstrap.min.js></script>
<script src="/static/selectMove.js"></script>
<script src="/static/updatepokemon.js"></script>
<script>selectMove(1);</script>
</body>
</html>
To better practice again, add document ready.
I need to select only 1 option inside a group. I have used multiple-select.js
I should be able to click either
A1 OR A2 OR A3
AND
B1 OR B2 OR B3
I also tried with - thought that it can deselect previous buttons when a new one is clicked as long as all of them have the same name but in vain.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet"/>
</head>
<body>
<select multiple="multiple">
<optgroup label="Group A">
<option value="1">Radio A1</option>
<option value="2">Radio A2</option>
<option value="3">Radio A3</option>
</optgroup>
<optgroup label="Group B">
<option value="4">Radio B1</option>
<option value="5">Radio B2</option>
<option value="6">Radio B3</option>
</optgroup>
</select>
<script>
$('select').multipleSelect(
{
multiple: true,
multipleWidth: 300,
selectAll: false,
width: '100%',
onClick: function(view) {
//;
}
}
);
</script>
</body>
Normally,multiple-select plugin does not support your desired behavior where you can choose only one choice in each optgroup in a single select.However,you can choose only one choice in a single select without optgroup.
So you can use 2 "single row" selects to accomplish your desired functionality.
PS: I have tried to customize the multiple-select behavior enabling you to choose only one radio button in a single optgroup,but the plugin is not flexible enough.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" />
</head>
<body>
<fieldset>
<legend>Choose Group A and B</legend>
<label>Group A</label>
<select multiple="multiple">
<option value="1">Radio A1</option>
<option value="2">Radio A2</option>
<option value="3">Radio A3</option>
</select>
<label>Group B</label>
<select multiple="multiple">
<option value="4">Radio B1</option>
<option value="5">Radio B2</option>
<option value="6">Radio B3</option>
</select>
</fieldset>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
<script>
$('select').multipleSelect({
multiple: true,
multipleWidth: 300,
selectAll: false,
width: '100%',
single: true,
onClick: function (view) {
/*
view.label: the text of the checkbox item
view.checked: the checked of the checkbox item
*/
//Uncheck other checkboxes in the group
},
onOptgroupClick: function (view) {
/*
view.label: the text of the optgroup
view.checked: the checked of the optgroup
view.children: an array of the checkboxes (DOM elements) inside the optgroup
*/
}
});
</script>
</body>
</html>
Hope it can help you.
For the sake of space in a form ,use bootstrap inline form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple select to function like radio in a group</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div class="container">
<form class="form-inline">
<fieldset>
<legend>Choose Group A and B</legend>
<label>Group A </label>
<select class="form-control">
<option value="1">Radio A1</option>
<option value="2">Radio A2</option>
<option value="3">Radio A3</option>
</select>
<label>Group B </label>
<select class="form-control">
<option value="4">Radio B1</option>
<option value="5">Radio B2</option>
<option value="6">Radio B3</option>
</select>
</fieldset>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I am trying to create a php form for car rental website with different options to choose for the customer. If the customer wants a small car with seating capacity of 4 then a dialog box should appear with list of cars available, so he can choose from that options. I tried to do it, but no luck.
How to add different images to a jquery dialog box? After adding one choice of them to save in php form before submitting it:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$("#imgpopup").dialog({
modal: true,
autoOpen: false,
buttons :{
"Save": function() {
$('#car').val($(this).attr("img") );
$( this ).dialog( "close" );
},
}
});
$("#selectBox").change(function(){
if ($(this).val()=="4")
{
$("#imgpopup").dialog('open'); }
});
});
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="">
<select id="selectBox">
<option value="0">select</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="7+">7+</option>
</select>
<input type="image" id="car" name="car" >
<div id="imgpopup">
<img id="image1" src="car1.png">
<img id="image2" src
</div>
</form>
</body>
</html>
I have this script currently, which does everything I now want it to do. It has a drop down, you select goTo, and you can choose Wikipedia or a list of other websites. From there it will change the value of the iFrame that is currently there (Microsoft for example) to a different website (Wikipedia for example).
However my issue is that upon changing options, it closes the connection and displays a blank page until I choose Wikipedia. How can I resolve this? This is my current code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
<script type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.js?v=0.9.10"></script>
<script>
function goToPage763(mySelect)
{
PageIndex2=mySelect.selectedIndex;
{
if
(
mySelect.options[PageIndex2].getAttribute('href') != "none"
)
{
//this is the key code in the JavaScript to open the new page in
//the iframe:-
frames['iframe2'].location.href = mySelect.options[PageIndex2].getAttribute('href');
}
}
}
// Add your javascript here
$(function(){
$("#size").chained("#color");
});
</script>
</head>
<body>
<form name="form763">
<select class="form-control" id="color">
<option value="">choose options</option>
<option value="27">Goto</option>
<option value="26">Nothing</option>
</select>
<select class="form-control" id="size" name="select763" size="1" onchange="goToPage763(this.form.select763)">
<option value="">choose options</option>
<option value="27" class="27" href="http://www.wikipedia.com">Wiki</option>
<option value="26" class="26">Nothing</option>
</select>
</form>
<iframe name="iframe2" src="http://www.microsoft.com" align="top" height="800px" width="95%" align="middle">
</body>
</html>
See if this will solve your problem
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"
data-semver="2.0.3" data-require="jquery"></script>
<script>
function goToPage763(mySelect){
frames['iframe2'].location.href = $(mySelect).val();
}
</script>
</head>
<body>
<form name="form763">
<select class="form-control" id="size" name="select763"
size="1" onchange="goToPage763(this)">
<option value="">choose options</option>
<option value="http://www.wikipedia.com">Wiki</option>
<option value="http://www.microsoft.com">Microsoft</option>
<option value="https://www.wiktionary.org/">Wiktionary</option>
</select>
</form>
<iframe name="iframe2" src="http://www.microsoft.com" align="top"
height="800px" width="95%" align="middle">
</body>
</html>