How to allow multiselect in this bootstrap dropdown?. because this one is a dropdown menu that consists of a ul and li element..it's not a select element that I can just add 'multiple'...so how ?
<div class="dropdown pull-left dropdown-custom-quicklook">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><i class="icon-filter"></i> Filter By Quick Look</button>
<ul class="dropdown-menu pull-right keep-open-on-click" role="menu">
<?php
foreach($quicklook as $look){
echo '<li>'.$look.'</li>';
}
?>
</ul>
</div>
I used the bootstrap-select.js thing to make it work
Related
I have an API server and want to call the ID with a dropdown and when it is selected. The textbot also changes based on the contents of my API, which ID I choose.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Code</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<?php foreach($data as $row) : ?>
<a class="dropdown-item" href="#" ><?= $row["Code"]; ?></a>
<?php endforeach ?>
</div>
</div>
<p class="card-text"><?= $row["Desc"] ?></p>
<p class="card-text"><?= $row["LastUpdate"] ?></p>
</div>
help me pls
How to create a drop down list using bootstrap to include it in the form?
There has to be 3 fields but 1 of them has to be hidden depending of what a User selected in first field.
Example:
First field options: Book/Movie
2nd field options if book is selected (after selecting in first field this field should appear 1field should stay visible and 3rd field should stay invisible): Action/Horror/Drama
3rd field oprions if movie is selected: DVD/Cinema/VoD (now 1st field is visible, 2nd is not.
Code which i've tried.
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Books
</button>
<div class="dropdown-menu_1-always-visible">
<a class="dropdown-item" href="#">Books</a>
<a class="dropdown-item" href="#">Movies</a>
</div>
<div class="dropdown-menu-2-hidden-if-movies-selected-in-field-1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Horror</a>
<a class="dropdown-item" href="#">Drama</a>
</div>
<div class="dropdown-menu-3-hidden-if-books-selected-in-1">
<a class="dropdown-item" href="#">DVD</a>
<a class="dropdown-item" href="#">Cinema</a>
<a class="dropdown-item" href="#">Vod</a>
</div>
</div>
Thank you for all the help! I need to implement it with PHP/HTML and Bootstrap to Laravel :)
<a class="dropdown-item" onclick="showMySection()" href="#">Books</a>
<a class="dropdown-item" onclick="showMySection1()" href="#">Movies</a>
<script type="text/javascript">
function showMySection(){
document.getElementsByClassName("dropdown-menu-2-hidden-if-movies-selected-in-field-1").style.display = 'block';
document.getElementsByClassName("dropdown-menu-3-hidden-if-books-selected-in-1").style.display = 'none';
}
function showMySection1(){
document.getElementsByClassName("dropdown-menu-2-hidden-if-movies-selected-in-field-1").style.display = 'none';
document.getElementsByClassName("dropdown-menu-3-hidden-if-books-selected-in-1").style.display = 'block';
}
</script>
i have following :
<button id="not" class="notification btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<i class="fa fa-bell"></i>
<span class="badge badge-success" style="background-color:#f3b760">
10 </span>
</button>
<div id="show"></div>
I want div id "show" to load job-notification.php on clicking the button above, so i got this:
<script>
$(document).ready(function(){
$("#not").click(function(){
$("#show").load("job-notification.php");
});
});
</script>
FYI, Button is a DROPDOWN & job-notification.php contains results like this:
<ul class="dropdown-menu dropdown-menu-right">
<li>
EXAMPLE 1
</li>
<li>
EXAMPLE 2
</li>
</ul>
Why is this not working?
You can also try this one: $(document).on("click","#not",function() {});
For loading css, you can use this: $('head').append('');
Add the following in append function in less than and greater than brackets :
link rel="stylesheet" href="cssname.css" type="text/css"
I have the following drop-down menu in a page:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select a Category
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
Cat I
</li>
<li>
Cat II
</li>
<li>
Cat III
</li>
<li>
Cat IV
</li>
<li>
Cat V
</li>
</ul>
</div>
This is part of a form with POST method. How can I add the selected item to the _POST array? Should I specify a name somewhere in my code?
You can use the below method:
<form name="cat_form" id="cat_form" method="POST" />
<input class="span2" id="cat_type" name="cat_type" type="hidden">
<div>
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Select a Category<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li onclick="$('#cat_type').val('cat_1');">Cat 1</li>
<li onclick="$('#cat_type').val('cat_2');">Cat 2</li>
<li onclick="$('#cat_type').val('cat_3');">Cat 3</li>
<li onclick="$('#cat_type').val('cat_3');">Cat 4</li>
</ul>
</div>
</form>
Use formcontrols: http://getbootstrap.com/css/#forms-controls
example:
<div class="form-group">
<label for="sel1">Category:</label>
<select class="form-control" id="sel1">
<option>Cat 1</option>
<option>Cat 2</option>
<option>Cat 3</option>
<option>Cat 4</option>
</select>
</div>
You can also overwrite the css for example:
form .form-group {
border: 2px solid red;
}
I currently have multiple drop down buttons for several table rows that need to be tied to an onClick event. The problem I'm having is capturing the information from each button. Here is what my test code looks like:
<table class="table table-bordered">
<tbody>
<tr>
<td><img src="/photos/files/5/m/131309a4fb918110ed1061e90a715eca.jpeg"/></td><td><div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Edit</li>
<li><i class="icon-trash"></i> Delete</li>
</ul>
</div>
</tr>
<tr>
<td><img src="/photos/files/5/m/b19102d8ba1158e2a139ffa84e8e8540.jpeg"/></td><td><div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Edit</li>
<li><i class="icon-trash"></i> Delete</li>
</ul>
</div></tr>
</tbody>
</table>
current javascript:
$('.btn').click(function(e) {
e.preventDefault();
???
});
How do I capture and process each click event from multiple buttons? I'm assuming I need to add a unique ID to each button but how can I capture an onclick event for each button item?
inside the function you can use this to reffer to the object in cause.
$(".btn").click(function () {
//here you can check which button did it
if ($(this).attr('class')=='icon-pencil')
//do sth
else
//do sth else
});
Check the jquery docs.