We Keep Coding

How to display(block/none) second menu depending on first using bootstrap multiselect

I have two menus like that.
If I select Abon in the first Menu. It should display all li elements under the Abon optgroup(Abon-1, Abon-2) if I uncheck block in the second menu should be disapeared.
Select and options are my code. And another code is generated by bootstrap multiselect(li, input checkbox, and so on)
<!-- first common -->
<span class="multiselect-native-select">
<select name="emp_sel9[]" id="my_select_descr" multiple="multiple">
<option value="-1">All</option>
<option value="1" style="padding-left: 15px;">Abon</option>
<option value="2" style="padding-left: 15px;">Client</option>
</select>
<div class="btn-group">
<button type="button" class="multiselect dropdown-toggle btn btn-
default"
data-toggle="dropdown" title="Abon, Client" aria-expanded="false">
<span class="multiselect-selected-text">Abon, Client</span>
<b class="caret"></b>
</button>
<ul class="multiselect-container dropdown-menu">
<li class="multiselect-item multiselect-all">
<a tabindex="0" class="multiselect-all">
<label class="checkbox">
<input type="checkbox" value="multiselect-all">Select
All</label>
</a>
</li>
<li>
Full code here:
http://jsfiddle.net/w7aakdbb/1170/
I have an idea to search elements using find, children and sublings...But get stacked with it.

I just give you hint how to fix it.
Get the checked element and show it in dropdown 2.
$(document).ready(function() {
$("#menu-1>li").on("click", function() {
var selected = $(this).text()
console.log(selected);
$("#menu-2>li").hide();
$("#menu-2").find("li[data-value='abon']").show();
});
});
this example is working when you select abon you can improve it more. (or I will update it but later. I will make it more dynamic with checkbox selection, not text)
https://jsfiddle.net/princesodhi/8kfyd7ec/1/

bootstrap-select get the value and the text

I try to do a selections on companies to add to a group, and after that to do the connection in database. I'm kind of blocked on the "html" code. I work in Laravel
<select id="selectCmp" class="selectpicker" data-live-search="true" multiple title="Select structures">
#foreach($allCompanies as $company)
<option value="{{$company->id}}"> {{$company->name}}</option>
#endforeach
</select>
<iframe name="votar" style="display:none;"></iframe>
<form action={{route('admin.group.affect')}} method="POST" target = "votar">
{{csrf_field()}}
<div id="cmpInputList">
</div>
</br>
<button id="addGroupeBtn" class="btn btn-secondary" type="submit">
Add
</button>
</form>
Ok, if try to inspect the element, I have something like:
<div class="btn-group bootstrap-select show-tick dropup">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button"
data-id="selectCmp" title="Select structures" aria-expanded="true"><span
class="filter-option pull-left"> Select structures</span> <span class="bs-caret"><span
class="caret"></span></span></button>
<div class="dropdown-menu open" role="combobox" style="max-height: 560px; overflow: hidden; min-height: 142px;">
<div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off" role="textbox"
aria-label="Search"></div>
<ul class="dropdown-menu inner" role="listbox" aria-expanded="false"
style="max-height: 504px; overflow-y: auto; min-height: 86px;">
<li data-original-index="0"><a tabindex="0" class="" data-tokens="null" role="option"
aria-disabled="false" aria-selected="false"><span
class="text"> A</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="1"><a tabindex="0" class="selected" data-tokens="null" role="option"
aria-disabled="false" aria-selected="true"><span
class="text"> B </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="2"><a tabindex="0" class="" data-tokens="null" role="option"
aria-disabled="false" aria-selected="false"><span
class="text"> C </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
</ul>
</div>
<select multiple="multiple" id="selectCmp" data-live-search="true" title="Select structures"
class="selectpicker" tabindex="-98">
<option value="1"> A</option>
<option value="0">B</option>
<option value="2"> C</option>
</select>
</div>
<iframe name="votar" style="display: none;"></iframe>
<form action="http://127.0.0.1:8000/admin/affectCmpToGroup" method="POST" target="votar">
<input type="hidden" name="_token" value="KSyRBJq6p6yJBPJnv0EOsC2sJwEe2SbzjxtLtuI5">
<div id="cmpInputList"></div>
<br>
<button id="addGroupeBtn" type="submit" class="btn btn-secondary">
Add
</button>
</form>
So I have a ul with the innerText and mention about selected or not. My problem is how to give the innerText and the value from option (the id) to the form in order to pass that to controller and to database.
I hope it's clear... I'm kind of new in all this.

For non 'multiple' select it is simply $('#selectCmp').val() and
$('#selectCmp option:selected').text().
In this case the array of chosen options ids can be also gotten via $('#selectCmp').val().
To get array of selected option names, it can be done like this:
$('#selectCmp').on('changed.bs.select', function (e) {
var options = $('#selectCmp option:selected');
var selected = [];
$(options).each(function(){
selected.push( $(this).text() );
// or $(this).val() for 'id'
});
// write value to some field, etc
});
Though this code might not be neccessarily bound to 'changed.bs.select', depending on your app logic.

HTML CSS & Bootstrap navbar search width / customization

Struggling with bootstrap / styling. I have created a navbar with a searchbox and some buttons.
I cannot for the life of me figure out how to customize the width of the searchbar itself. I could set a fixed width, but I would like to make use of the grid system if possible so that it is responsive.
id like the search bar to be a bit longer than whatever it is defaulting to.
Perhaps the width being auto screws things up? im not sure.
*I also have a Bootstrap-Select in this fiddle, but for some reason it wont show up (I did add a cdn reference for it.. oh well)
Fiddle: https://jsfiddle.net/uaLj1n07/2/
<nav class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="275" style="margin-bottom:5px">
<div class="row">
<div class="col-sm-12">
<form action="#" class="navbar-form navbar-left" role="search" id="searchForm">
<div class="input-group">
<input type="text" class="form-control input-sm" placeholder="Search..." name="searchTerms" />
<span class="input-group-btn">
<button type="submit" class="btn btn-default-grey btn-sm"><i class="glyphicon glyphicon-search"></i></button>
<select class="selectpicker show-tick " id="searchDate" name="searchDate" data-style="btn btn-default-grey btn-sm" data-width="fit">
<option id="anytime" value="anytime">Any Time</option>
<option data-divider="true"></option>
<option id="30days" value="30days">Last 30 Days</option>
<option id="60days" value="60days">Last 60 Days</option>
<option id="90days" value="30days">Last 90 Days</option>
</select>
<button type="button" class="btn btn-sm btn-link">Advanced</button>
</span>
</div>
</form>
<form class="navbar-form navbar-right">
<div class="form-group">
<a href="#" class="btn btn-danger btn-sm">
<i class="glyphicon glyphicon-pencil adjust-left" aria-hidden="true"></i> Some Button
</a>
</div>
</form>
</div>
</div>
</nav>

You can set the min-width of the search box like this:
.form-control.input-sm {
min-width: 300px;
}
I forked your code and created a fiddle here: https://jsfiddle.net/bxqj3q8g/

jQuery display element that contains certain class strings

Hey guys I am currently developing a site that lists vehicle data using PDO and a MySQL database.
Here is an example of what I currently have: http://www.drivencarsales.co.uk/
So basically each row in the MySQL table contains all of the data for each vehicle and I am printing them into a list using the following code:
<?php include('db-affinity/filter.php'); ?>
<div class="col-md-8 col-sm-8 col-lg-8">
<?php while($row = $results->fetch(PDO::FETCH_ASSOC))
{
echo '
<div class="listing-container ' . $row["Make"] . '">
<h3 class="model-listing-title clearfix">'.$row["Make"].' '.$row["Model"].' '.$row["Variant"].'</h3>
<h3 class="price-listing">£'.number_format($row['Price']).'</h3>
</div>
<div class="listing-container-spec">
<img src="'.(explode(',', $row["PictureRefs"])[0]).'" class="stock-img-finder"/>
<div class="ul-listing-container">
<ul class="overwrite-btstrp-ul">
<li class="diesel-svg list-svg">'.$row["FuelType"].'</li>
<li class="saloon-svg list-svg">'.$row["Bodytype"].'</li>
<li class="gear-svg list-svg">'.$row["Transmission"].'</li>
<li class="color-svg list-svg">'.$row["Colour"].'</li>
</ul>
</div>
<ul class="overwrite-btstrp-ul other-specs-ul h4-style">
<li>Mileage: '.number_format($row["Mileage"]).'</li>
<li>Engine size: '.$row["EngineSize"].'cc</li>
</ul>
<button href="#" class="btn h4-style checked-btn hover-listing-btn"><span class="glyphicon glyphicon-ok"></span> History checked
</button>
<button href="#" class="btn h4-style more-details-btn hover-listing-btn tst-mre-btn"><span class="glyphicon glyphicon-list"></span> More details
</button>
<button href="#" class="btn h4-style test-drive-btn hover-listing-btn tst-mre-btn"><span class="test-drive-glyph"></span> Test drive
</button>
<h4 class="h4-style listing-photos-count"><span class="glyphicon glyphicon-camera"></span> 5 More photos</h4>
</div>
';
} ?>
</div>
</div>
</div>
<script>$(“.select-box”).change( function() {
// get the value of the select element
var make = $(this).val();
//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(“.listing-container”).not(“.” + make).hide();
});</script>
As you can see I am using a while loop to display every row I have also added the 'Make' of the vehicle to the listing container class, there is also a bit of jQuery however I will explain what that is used for shortly.
I then have this form:
<div class="container con-col-listing">
<div class="row">
<div class="col-md-4 col-sm-4">
<form class="car-finder-container dflt-container">
<h2 class="h2-finder">Car finder</h2>
<ul class="toggle-view">
<li class="li-toggle">
<h4 class="h4-finder-toggle">Make<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<select class="form-control select-box" name="">
<option value="make-any">Make (Any)</option>
<?php while($make = $filterres->fetch(PDO::FETCH_ASSOC))
{
echo '
<option value="">'.$make["Make"].'</option>
';
} ?>
</select>
<select class="form-control last-select select-box">
<option value="model-any">Model (Any)</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</li>
<li class="li-toggle">
<h4 class="h4-finder-toggle">Body type<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<input id="four-by-four-checkbox" class="float-checkbox" type="checkbox"/>
<label for="four-by-four-checkbox" class="label-checkbox">4x4</label>
<input id="convertible-checkbox" class="float-checkbox" type="checkbox"/>
<label for="convertible-checkbox" class="label-checkbox">Convertible</label>
<input id="coupe-checkbox" class="float-checkbox" type="checkbox"/>
<label for="coupe-checkbox" class="label-checkbox">Coupe</label>
</div>
</li>
<li class="li-toggle">
<h4 class="h4-finder-toggle">Transmission<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<input id="automatic-checkbox" class="float-checkbox" type="checkbox"/>
<label for="automatic-checkbox" class="label-checkbox">Automatic</label>
<input id="manual-checkbox" class="float-checkbox" type="checkbox"/>
<label for="manual-checkbox" class="label-checkbox">Manual</label>
<input id="semi-auto-checkbox" class="float-checkbox" type="checkbox"/>
<label for="semi-auto-checkbox" class="label-checkbox">Semi automatic</label>
</div>
</li>
</ul>
<button href="#" class="btn btn-block car-search-button btn-lg btn-success"><span class="glyphicon car-search-g glyphicon-search"></span> Search cars
</button>
<h4 class="h4-finder">Try our Smart Search <span class="glyphicon info-car-search-g glyphicon-info-sign"></span></h4>
</form>
</div>
You only need to take notice to the start of the form, as you can see the 'Make's' of the vehicles are displayed in the select element options using a while loop.
Now back to the jQuery:
<script>$(“.select-box”).change( function() {
// get the value of the select element
var make = $(this).val();
//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(“.listing-container”).not(“.” + make).hide();
});</script>
I have tried adding this jQuery to show the classes that display the same 'Make' selected in the options of the select element and hide the classes that do not contain that class in the listing-container div.
For some reason when the option is selected the jQuery isn't displaying the classes that have the same 'Make' as the option selected.
Any idea where I am going wrong?
BTW I know I should be using AJAX for this however I wouldn't know where to start.

You need to insert a value into the option tags of your Make .select-box. Each of the option tags is given with <option value="">'.$make["Make"].'</option>.
Thus $(this).val() will return an empty string. Try something like: '<option value="'. $make["Make"].'">'.$make["Make"].'</option> instead.

Make the changes indicated below:
option
<option>'.$make["Make"].'</option>
jQuery
//Wait for DOM to load
$(document).ready(function() {
$(“.select-box”).change( function() {
// get the value of the select element
var make = $(this).val();
//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(“.listing-container”).not(“.” + make).hide();
});
});
UPDATE
After reviewing your page, the only code you need at the current location, EXACTLY AS SHOWN, is:
$(".select-box").first().change( function() {
var make = $(this).val();
if( make != 'make-any' ) {
$('.' + make).show().next('.listing-container-spec').show();
$(".listing-container").not("." + make).hide()
.next('.listing-container-spec').hide();
}
}).change();

toggle hidden label for element

How can I check if a element has a label and call the toggle function to display it?
Trying this:
if($('label').attr('for') == $(this).attr('name')) {
alert($('label').attr('for') == $(this).attr('name')); // displays true if hidden or displayed
$('label').attr('for='+$(this).attr('name')).toggle(true); // error
}
HTML not hidden (this is just to show the correct syntax as the element is hidden):
<div>
<label for="state" class="ui-select">
State*
</label>
<div class="ui-select">
<a href="#" role="button" aria-haspopup="true" data-theme="z" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-down-z ui-btn-up-z">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">State*</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
</span>
</a>
<select name="state" id="state" tabindex="-1" class="required">
<option value="">State*</option>
<option value="AK">ALASKA</option>
<option value="...">...</option>
</select>
</div>
</div>
HTML hidden:
<div>
<div class="ui-select">
<a href="#" role="button" aria-haspopup="true" data-theme="z" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-down-z ui-btn-up-z">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">State*</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
</span>
</a>
<select name="state" id="state" tabindex="-1" class="required">
<option value="">State*</option>
<option value="AK">ALASKA</option>
<option value="...">...</option>
</select>
</div>
</div>

It sounds like you're looking for $('label[for="' + this.name + '"]').
You can use the Attribute Equals selector to select elements with a specific attribute value.