We Keep Coding

Search bar with dropdown options and function call

I am trying to have a search bar with 2 options (as dropdown list) and ONLY if user selects S1 it should call a highligthme () function and should display .
but if user selects S2 it should not call this function and my code is calling this function on both selections from drop down list ?
Below is my code. Please guide what am i doing wrong?
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">ACTION</span>
</button>
<ul class="dropdown-menu scrollable-dropdown" role="menu" >
<li id="S1"><a href="#" >search 1</a></li>
<li id="S2">search 2</li>
</ul>
</div>
<input type="hidden" name="search_param" id="search_param">
<input type="text" class="form-control" name="Search" id="txtBoxSearchKey" placeholder="Select Action from list " size="20" >
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btnSearch" class="btnSearch"onclick="orderSelector(document.getElementById('txtBoxSearchKey').value,document.getElementById('search_param').textContent)">
<span class="glyphicon glyphicon-search"></span>
</button></span>
<span class="result-count" ></span>
</div>
CSS being used is:
/* Style to create scroll bar in dropdown */
.scrollable-dropdown{
height: auto;
max-height:320px; /* Increase / Decrease value as per your need */
overflow-x: hidden;
}
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>

Ok you missing the event listeners on your buttons clicks .
Another think I changed was to give the elements ID's so we can add events to them .
I also used they CSS libraries that come with bootstrap
In order to get the popup to display we have to add the
show
class to the element
Here is the working code in the snippet It shows the popup and runs a function called highlight if S1 is clicked ...
I trust this helps
//first thing is to get the action button click event
var dropdown = document.getElementById('dropdown');
dropdown.addEventListener("click", display);
function display(e) {
var foo = document.getElementById('foo');
if (foo.classList.contains('show')){
foo.classList.remove('show');
}
else{
foo.classList.add('show');
}
}
// now to run your highlight me function
var s1 = document.getElementById('S1');
s1.addEventListener("click", highligthme)
function highligthme() {
console.log('this does whatever hilightme does ')
foo.classList.remove('show');
}
.scrollable-dropdown {
height: auto;
max-height: 320px;
/* Increase / Decrease value as per your need */
overflow-x: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id='dropdown'>
<span id="search_concept">ACTION</span>
</button>
<ul class="dropdown-menu scrollable-dropdown " id='foo' role="menu ">
<li id="S1">search 1</li>
<li id="S2">search 2</li>
</ul>
</div>
<input type="hidden" name="search_param" id="search_param">
<input type="text" class="form-control" name="Search" id="txtBoxSearchKey" placeholder="Select Action from list " size="20">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btnSearch" class="btnSearch"
onclick="orderSelector(document.getElementById('txtBoxSearchKey').value,
document.getElementById('search_param').textContent)">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<span class="result-count"></span>
</div>

How do I create a dropdown that when selected updates an input field?

I have the below code to create a form input field which the user can type their search query into as normal. However, I also want to dropdown option to be part of this input. The problem I have, is that when the user selects an option from this dropdown, there is no placeholder text that appears in the input field or nor does the input text change to show the user what they just selected from the dropdown. I tried to write a small script which would detect if an li a was selected and it would update the input field accordingly but I am a bit stuck. Any help welcome.
<form role="form">
<div class="input-group">
<div class="input-group-btn">
<input type="text" class="form-control" placeholder="Search">
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
<li class="input">black</li>
<li class="input">white</li>
<li class="input">red</li>
<li class="input">blue</li>
<li class="input">yellow</li>
</ul>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
</form>
$('ul li a').on('select', function () {
var selectedOption = $(this).find("placeholder").text();
$(this).text(selectedOption);
})

Here you have an working jsfiddle
$('ul li a').on('click', function () {
var selectedOption = $(this).text();
$('.form-control').val(selectedOption);
})

Try this code :
$('#color-dropdown-menu li').click( function () {
$('.form-control').attr('placeholder',$( this ).text());
});
HTML :
<form role="form">
<div class="input-group">
<div class="input-group-btn">
<input type="text" class="form-control" placeholder="Search">
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
<li class="input">black</li>
<li class="input">white</li>
<li class="input">red</li>
<li class="input">blue</li>
<li class="input">yellow</li>
</ul>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
</form>
CHECK IT

jQuery bootstrap multiple collapse not work

I need to collapse multiple button and div using jQuery and bootstrap like this :
HTML:
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
<BR><BR><BR>
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
JS:
$(function () {
$('#demo').on('hide.bs.collapse', function () {
$('#button').html('<span class="fa fa-collapse-down"></span> Show');
})
$('#demo').on('show.bs.collapse', function () {
$('#button').html('<span class="fa fa-collapse-up"></span> Hide');
})
})
but in action only work one button and div. how do can i fix this problem?!
DEMO

Use different id in the data-target. For example use #demo1 and #demo2 respectively.

Answer Edited as per Dynamic div & Button
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-start="open" data-target="#demo" data-close-text="Hide" data-open-text="Show"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
<BR><BR><BR>
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-start="close" data-target="#demo" data-close-text="Hide" data-open-text="Show"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
// toggle content on click
$('[data-toggle="collapse"]').click(function () {
if ($(this).attr('data-start') == 'open') {
$(this).html($(this).attr('data-close-text'));
} else {
$(this).html($(this).attr('data-open-text'));
}
$(this).attr('data-start', $(this).attr('data-start') == 'open' ? 'close' : 'open');
});
// set initial content
$('[data-toggle="collapse"]').each(function () {
if ($(this).attr('data-start') == "open") {
$(this).html($(this).attr('data-open-text'));
} else {
$(this).html($(this).attr('data-close-text'));
}
});

If you only want one div open at a time you might be able to achieve this very easily using the data-toggle-="tabs" attribute on buttons inside of a list with the "nav" class. You can read more about this in the bootstrap JavaScript documentation.

You can't have the same id="button" (or any other ID) twice on two different elements in a file.
This should be the code that you are looking for, but it may be cumbersome to have too many levels of JS so you must map it to a class instead, and then use the parent() function
http://jsfiddle.net/mu4whyb6/

Hover in each checkbox

Updated this question, because my previous code made a conflict with bootstrap
Hi I'm trying to make a hover in each checkbox. What I now have is that the hover occurs in each checkbox. When I click around the checkbox then you see a dropdownlist. But when I click away from the dropdownlist. Then the caret arrow should go away, but unfortunately it doesn't. I have also recorded myself to show you more clearly what I actually want:
Updated the video also, because my updated code displays the checkbox differently in the browser
link: https://www.youtube.com/watch?v=i6-T9wjNZY8&feature=youtu.be
Here is the code that I currently have, which lives in index.blade.php :
#extends('user._layouts.user')
#section('content')
<style>
.dropdown .caret{
display:none;
}
.dropdown:hover .caret, .dropdown.opened .caret{
display:inline-block;
}
</style>
<script>
var resetSel = function(){
};
$(document).ready(function () {
$('dropdown').on('click', function (e) {
e.preventDefault();
$('.dropdown.opened').removeClass('opened');
});
$('.dropdown').click(function(e){
var $this = $(this);
$('.dropdown.opened').removeClass('opened');
if(!$this.hasClass('opened'))
$this.addClass('opened');
//alert($check.attr('checked'));
});
$('.check').click(function(e){
e.stopPropagation();
});
});
</script>
<script>
function toggle(source) {
checkboxes = document.getElementsByClassName('check');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
#include('user._layouts.template_search')
<h1>Offerte overzicht</h1>
{{--link_to_route('user.orders.create', 'Create new Order')--}}
#if (count($orders))
<ul>
<div class="row">
<div class="col-md-1">STATUS</div>
<div class="col-md-3">offerte naam</div>
<div class="col-md-3">klant</div>
<div class="col-md-1">bedrag</div>
<div class="col-md-1">old delete</div>
<div class="col-md-1">Check all
<br>
<div class="btn-group">
<div class="dropdown">
<button id="selDelete" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<input id="check1" type="checkbox" onClick="toggle(this)" class="check">
<span class="caret-hover"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">
<li>Delete</li>
</ul>
</div>
</div>
</div>
</div>
#foreach($orders as $order)
<div class="row">
<div class="col-md-1">
<li>
#if ($order->status=='not submitted')
<div class="statusRed"></div>
#elseif ($order->status=='pending')
<div class="statusOrange"></div>
#else
<div class="statusGreen"></div>
#endif
</li>
</div>
<div class="col-md-3">
<li>
{{--as a third parameter we need to pass in the orderId, because it needs to be fed to
our actual user.orders.edit route. --}}
{{link_to_route('user.orders.edit', $order->order_name, array($order->id))}}
</li>
</div>
<div class="col-md-3">
<li>
{{$order->client['companyName']}}
</li>
</div>
<div class="col-md-1">
<li>
€{{$order->price}}
</li>
</div>
<div class="col-md-1">
<li>
{{Form::open(array('route'=>array('user.orders.destroy',$order->id),
'method'=>'delete','class'=>'destroy'))}}
{{Form::submit('Delete', array('class' => 'btn btn-default'))}}
{{Form::close()}}
</li>
</div>
<div class="col-md-1">
<li>
<!--ik kan blade niet gebruiken, want hij laat me mijn checkbox altijd op checked staan.-->
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle selDelete" data-toggle="dropdown">
<input id="check1" name="checkbox[]" type="checkbox" class="check" >
<span class="caret-hover caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">
<li><a href= "{{ route('user.orders.destroy',array( $order->id )) }}" data-method="delete" >Deletey</a></li>
</ul>
</div>
</li>
</div>
</div>
#endforeach
</ul>
#endif
#stop
Gladly I'm waiting for your response. Anyway thanks for your answer.

You have used an id 'selDelete' around multiple items. Consider using a class:
class = selDelete
in place of any tags where you have put:
id = selDelete
And similarly, be sure to switch any references to:
#selDelete
into:
.selDelete
I believe that may solve your problem, check that before anything else, hope that helps :)

Making same jquery work for drop downs in dynamically rendered partial views

In my main view, I have an add button. Clicking the add button brings in a partial view.
Main.cshtml
<div id="NameCats">
#Html.Partial("_Temp")
</div>
<div class="row">
<button id="addInfo" class="btn"><img src="~/Content/Images/Add.PNG" /></button>
Add Info
</div>
In my Temp partial view, I have multiple bootstrap input drop down groups.
_Temp.cshtml
<div id="info">
<div class="well">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<input id="name" type="text" class="form-control dropdown-text" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="nameList" class="dropdown-menu pull-right">
<li> <a tabindex="-1" href="#"> Test1 </a> </li>
<li> <a tabindex="-1" href="#"> Test2 </a> </li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<input id="cat" type="text" class="form-control dropdown-text" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="catList" class="dropdown-menu pull-right"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
Selecting an item from first drop down should fill in the input for that drop down with the selected value. Here is my javascript to make it work. The problem is when I select item from the drop down that is rendered initially, the click (li a) function works but when I click Add button and then try to repeat the selection for the drop down in this new info section, the click (li a) function is not hit. What am I doing wrong?
$(function () {
$('.dropdown-menu').each(function () {
$(this).on('click', 'li a', function () {
$(this).parents(".input-group").find('.dropdown-text').val($(this).text());
});
});
});
$(function () {
$('#addInfo').click(function (e) {
e.preventDefault();
$('#NameCats').append($("#info").html());
});
});

The issue is your that your newly added elements do not have a click handler associated with them, since the function to add the handler is only run on page load. You have the concepts of event bubbling in place, but on the wrong parent elements and that essentially only keeps an eye on new li a elements and not entire dropdown-menu being added.
Change your first function to the following, which will keep a "watch" on any dropdown-menu added in the #NameCats element.
$(function () {
$('#NameCats').on('click', '.dropdown-menu li a', function () {
$(this).parents(".input-group").find('.dropdown-text').val($(this).text());
});
});
Here is a jsFiddle working example.