I am having a select box in my form, and after page loading, it is then transformed to bootstrap button before the select box. I can't set the selected value for the converted bootstrap button drop-down li.
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="Occupation" title="-- Please select Occupation--">
<span class="filter-option pull-left">-- Please select Occupation--</span> <span class="bs-caret">
<span class="caret"></span></span></button>
<div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu">
<li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">-- Please select Occupation--</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Salaried</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Business</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Above 18 Years</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div>
<select name="Occupation" class="form-control show-tick" required="" tabindex="-98">
<option value="">-- Please select Occupation--</option>
<option value="Salaried">Salaried</option>
<option value="Business">Business</option>
<option value="Above 18">Above 18 Years</option>
</select>
I am having the value in localStorage.getItem('Occupation'), and I tried to set the value to that li by using
$('#Occupation ul li').eq(1).find('span').eq(1).text(localStorage.getItem('Occupation')); //not worked
$('#Occupation').parents('.btn-group').find('.dropdown-toggle').html(localStorage.getItem('Occupation')+' <span class="caret"></span>'); //not worked
$("#Occupation li a").filter("[value=" + localStorage.getItem('Occupation') + "]"); //not worked
$("#Occupation").html(localStorage.getItem('Occupation') + ' <span class="caret"></span>'); //not worked
Could someone suggest to me a solution to set the value to that drop-down?
Thanks :)
Upon checking, there is a plugin (bootstrap-select) installed in my site. That plugin modifies my select box to the bootstrap button.
Then I visited the plugin site and got a solution,
$('select[name="Occupation"]').selectpicker('val', localStorage.getItem('Occupation'));
Related
I have number of filters to show products in my shop. I'm using bootstrap-select to style the filter (dropdowns).
When I change a filter value, the other filters automatically hide options if there are no results available for that combination.
The problem is, that there a re now Filters that show that don't have any available options to choose from. In this case I want to hide the Filter completely.
If there are options available the code looks like this:
<div class="form-group ">
<label>Serie</label>
<div class="btn-group bootstrap-select show-tick js-wpv-filter-trigger form-control open"><button type="button" class="btn dropdown-toggle bs-placeholder btn-dropdown btn-default" data-toggle="dropdown" role="button" data-id="wpv_control_select_wpcf-serie" title="Bitte wählen..." aria-expanded="true">
<span class="filter-option pull-left">Bitte wählen...</span>
<span class="bs-caret">
<span class="caret"></span>
</span>
</button>
<div class="dropdown-menu open" role="combobox">
<ul class="dropdown-menu inner" role="listbox" aria-expanded="true">
<li data-original-index="0"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">D-9</span><span class="fontawesome fa fa-check check-mark"></span></a></li>
</ul>
</div>
<label class="custom-select">
<select id="wpv_control_select_wpcf-serie" name="wpv-wpcf-serie[]" class="selectpicker js-wpv-filter-trigger form-control" multiple="multiple" tabindex="-98">
<option value="D-9">D-9</option>
</select>
<span></span>
</label>
</div>
</div>
If there is no option available, the code looks like this:
<div class="form-group">
<label>Passend für Helm</label>
<div class="btn-group bootstrap-select show-tick js-wpv-filter-trigger form-control open">
<button type="button" class="btn dropdown-toggle bs-placeholder btn-dropdown btn-default" data-toggle="dropdown" role="button" data-id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" title="Bitte wählen..." aria-expanded="true">
<span class="filter-option pull-left">Bitte wählen...</span>
<span class="bs-caret">
<span class="caret"></span>
</span>
</button>
<div class="dropdown-menu open" role="combobox">
<ul class="dropdown-menu inner" role="listbox" aria-expanded="true"></ul>
</div>
<label class="custom-select">
<select id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" name="wpv-wpcf-kompatibilitat-extern-mechanisch[]" class="selectpicker js-wpv-filter-trigger form-control" multiple="multiple" tabindex="-98">
</select>
<span></span>
</label>
</div>
</div>
My goal is to add a class .hide-filter to .form-group if the child .dropdown-menu has no li
try below code where you can iterate each form-group and find if it contains dropdown with no li.
$(function(){
$('.form-group').each(function(){
var $dropdown = $(this).find('.dropdown-menu');
if($dropdown.find('li').length==0) {
$(this).addClass('hide-filter');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="form-group">
<label>Passend für Helm</label>
<div class="btn-group bootstrap-select show-tick js-wpv-filter-trigger form-control open"><button type="button" class="btn dropdown-toggle bs-placeholder btn-dropdown btn-default" data-toggle="dropdown" role="button" data-id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" title="Bitte wählen..." aria-expanded="true"><span class="filter-option pull-left">Bitte wählen...</span> <span class="bs-caret"><span class="caret"></span></span></button>
<div
class="dropdown-menu open" role="combobox">
<ul class="dropdown-menu inner" role="listbox" aria-expanded="true"></ul>
</div><label class="custom-select"><select id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" name="wpv-wpcf-kompatibilitat-extern-mechanisch[]" class="selectpicker js-wpv-filter-trigger form-control" multiple="multiple" tabindex="-98"></select><span></span></label></div>
</div>
This is another approach:
$( document ).ready(function() {
if($( ".dropdown-menu.inner:has(li)" ).length == 0){
$( ".form-group" ).addClass( "hide-filter" );
}
});
I am facing one problem, I want to show an error when the user has not selected any service from selectbox. I have two checkboxes of Nails and Hair, when user selects the Nails checkbox then, the user must have to select the service from the selectbox. If the user does not select the Hair checkbox then, the selectbox is not mandatory that is below Hair. If both are checked and then both below service must be selected with span serror message. Here is my html:-
enter code here
<div class="one-row">
<div class="div_img_part-2">
<span class="img_part_class-2"><img src="http://localhost:8000/images/ServiceImages/48031.png">
</span>
<span class="text_part_class-2">
<p class="custom-checkbox firstpart">
<input class="firstdisable" type="checkbox" id="0" name="services[]" value="1">
<label for="0">Nails</label>
</p>
</span>
<select id="checkSelect-0" name="service_type[Nails]" class="selectpicker" style="display: none;">
<option value="">Select Service</option>
<option value="Salon">Salon</option>
<option value="Mobile beautician">Mobile beautician</option>
<option value="Both">Both</option>
</select>
<div class="btn-group bootstrap-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="checkSelect-0" title="Select Service"><span class="filter-option pull-left">Select Service</span> <span class="caret"></span></button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li rel="0" class="selected"><a tabindex="0" class="" style=""><span class="text">Select Service</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="1"><a tabindex="0" class="" style=""><span class="text">Salon</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="2"><a tabindex="0" class="" style=""><span class="text">Mobile beautician</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="3"><a tabindex="0" class="" style=""><span class="text">Both</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
</ul>
</div>
</div>
<span id="serviceError-0" style="color: rgb(169, 68, 66);">Please select service</span>
</div>
<div class="div_img_part-2">
<span class="img_part_class-2"><img src="http://localhost:8000/images/ServiceImages/55643.png">
</span>
<span class="text_part_class-2">
<p class="custom-checkbox firstpart">
<input class="firstdisable" type="checkbox" id="1" name="services[]" value="2">
<label for="1">Hair</label>
</p>
</span>
<select id="checkSelect-1" name="service_type[Hair]" class="selectpicker" style="display: none;">
<option value="">Select Service</option>
<option value="Salon">Salon</option>
<option value="Mobile beautician">Mobile beautician</option>
<option value="Both">Both</option>
</select>
<div class="btn-group bootstrap-select dropup">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="checkSelect-1" title="Salon" aria-expanded="false"><span class="filter-option pull-left">Salon</span> <span class="caret"></span></button>
<div class="dropdown-menu open" style="max-height: 519.375px; overflow: hidden; min-height: 92px;">
<ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 507.375px; overflow-y: auto; min-height: 80px;">
<li rel="0" class=""><a tabindex="0" class="" style=""><span class="text">Select Service</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="1" class="selected"><a tabindex="0" class="" style=""><span class="text">Salon</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="2"><a tabindex="0" class="" style=""><span class="text">Mobile beautician</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="3"><a tabindex="0" class="" style=""><span class="text">Both</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
</ul>
</div>
</div>
<span id="serviceError-1" style="color:#A94442; display:none;">Please select service</span>
</div>
Image:-
Now you see that every category having own selectbox
Here is my jquery code :-
$("#checkservice").on('click',function() { // click event on submit button
var n = $( "input:checked" ).length; //
if(n == 0) {
alert("Please Select atleast One Service"); return false;
}
for (var i = 0; i <= 1; i++) {
if ($('#'+i).is(":checked")) {
if ($("#checkSelect-"+i).val() === "") {
$("#serviceError-"+i).show();
return false;
}
}
}
});
This jquery code works only for first checkbox when i select nails and not select any service it will show error but when i select hair checkbox its not showing error
Image:-
I am using laravel framework. Please help me
function onSubmit()
{
var fields = $("input[name='list']").serializeArray();
if (fields.length == 0)
{
alert('nothing selected');
// cancel submit
return false;
}
else
{
alert(fields.length + " items selected");
}
}
// register event on form, not submit button
$('#subscribeForm').submit(onSubmit)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="subscribeForm">
<fieldset id="cbgroup">
<div><input name="list" id="list0" type="checkbox" value="newsletter0" >zero</div>
<div><input name="list" id="list1" type="checkbox" value="newsletter1" >one</div>
<div><input name="list" id="list2" type="checkbox" value="newsletter2" >two</div>
</fieldset>
<input name="submit" type="submit" value="submit">
</form>
I am looking at how to populate a hidden_field with the value of a f.select field however I am having difficulty. I was going to use javascript but the html created from my haml makes it difficult to assign an id to the select I wish to pass the value from.
= f.select :trial, [['Yes', 'true'], ['No', 'false']], {}, :id => "free-trial", class: 'selectpicker mandatory'
This generates the following html
<div class="col-sm-4">
<select class="selectpicker mandatory" id="free-trial" name="campaign[trial]" style="display: none;">
<option value="true">Yes</option>
<option value="false" selected="selected">No</option>
</select>
<div class="btn-group bootstrap-select mandatory">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" data-id="free-trial" data-original-title="" title="">
<span class="filter-option pull-left">No</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="max-height: 133px; overflow-y: auto; min-height: 0px;">
<li rel="0">
<a tabindex="0" class="">
<span class="text">
Yes
</span>
<i class="icon-ok check-mark"></i>
</a>
</li>
<li rel="1" class="selected">
<a tabindex="0" class="">
<span class="text">No</span>
<i class="icon-ok check-mark"></i>
</a>
</li>
</ul>
</div>
</div>
This html when display is actually two selects one hidden with the ID assigned and a second which is displayed without the id associated. As a result my clicking on the visible select means the associated jquery doesnt fire.
If i understood you properly, you want catch value from select to hidden_input. You can use jquery to do that:
$('#free-trial').on('change', function(){
var val = $(this).val();
$('#your_hidden_input').attr('value', val);
}
<th class="dropdown" id="header">
<span>Label</span>
<span id="filter" class="sort_row glyphicon glyphicon-filter dropdown-toggle" data-toggle="dropdown" ></span>
<ul class="dropdown-menu filter-dropdown" role="menu">
<li >
<span class="input-group value">
<input type="text" id="inputField1" name="inputField1" class="form- control" ng-model='inputFieldFirst'/>
</span>
</li>
</ul>
</span>
</th>
Here I want to focus on the input field when the filter is clicked and the dropdown opens.
Is there a way in which I dont have to use the id of the input field and set focus on the input that is present in the dropdown
I probably try this.
$( "#filter" ).click(function() {
$( ".dropdown-menu input:first-child()" ).focus();
});
I have following HTML structure:
<button class="dropdown-toggle selectpicker btn btn-primary" data-toggle="dropdown" type="button" data-id="strategic_reseller_country" title="United States">
<div class="dropdown-menu open" style="max-height: 245.6px; overflow: hidden; min-height: 40px;">
<ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 243.6px; overflow-y: auto; min-height: 38px;">
<li class="" rel="0">
<a class="" style="" tabindex="0">
<span class="text"/>
<i class="glyphicon glyphicon-ok icon-ok check-mark"/>
</a>
</li>
<li rel="1">
<a class="" style="" tabindex="0">
<span class="text">Andorra</span>
<i class="glyphicon glyphicon-ok icon-ok check-mark"/>
</a>
</li>
<li rel="2">
<a class="" style="" tabindex="0">
<span class="text">United Arab Emirates</span>
<i class="glyphicon glyphicon-ok icon-ok check-mark"/>
</a>
</li>
<li rel="3">
<a class="" style="" tabindex="0">
<span class="text">Afghanistan</span>
<i class="glyphicon glyphicon-ok icon-ok check-mark"/>
</a>
</li>
<li rel="4">
<li rel="5">
<li rel="6">
<li rel="7">
<li rel="8">
<li rel="9">
<a class="" style="" tabindex="0">
<span class="text">Netherlands Antilles</span>
<i class="glyphicon glyphicon-ok icon-ok check-mark"/>
</a>
</li>
</ul>
</div>
So how could I get the item from list?
I am new to Node.Js (JavaScript) so I don't know how to achieve it in node.Js but it can be achieved in java as follows :
Select dropdown = new Select(driver.findElement(By.class("dropdown-menu inner selectpicker")));
dropdown.selectByVisibleText("Andorra");
Just click the desired option.
driver.findElement(webdriver.By.css('#mySelection > option:nth-child(4)'))
.click();
or by value
driver.findElement(webdriver.By.css('#mySelection > option[value=apple]'))
.click();
Note that I've changed your 'By' to a css selector. I'm lazy and like to just drill into the option from developer tools and select Copy CSS Path (chrome) or Copy Unique Selector (firefox).
You can create a function that select the value you desire
like this...
driver.wait(
until.elementLocated(By.id("continents")), 20000
).then(element => {
selectByVisibleText(element, "Africa")
});
function selectByVisibleText(select, textDesired) {
select.findElements(By.tagName('option'))
.then(options => {
options.map(option => {
option.getText().then(text => {
if (text == textDesired)
option.click();
});
});
});
}
For anyone stuck on this, here is how I did it for a <select> option:
<select id='mySelection'>
<option value='0'>Hello</option>
<option value='1'>Everybody</option>
<option value='2'>Got</option>
<option value='3'>It</option>
</select>
In Selenium for NodeJS, you would grab the It <option>:
var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().
withCapabilities(webdriver.Capabilities.chrome()).
build();
driver.findElement(webdriver.By.id('mySelection')).sendKeys('It');
When you .sendKeys() for the option it has to equal the text displayed to the user in the dropdown.
In your case just grab the parent element then sendKeys() for the child element.
I would use Cheerio for this.
module.exports = {
"login": function (browser) {
var cheerio = require("cheerio")
browser
.url("http://www.wikipedia.org")
.waitForElementVisible('body', 1000)
.waitForElementVisible('select#searchLanguage', 1000)
.source(function(result) { // .source() dump the page source in the variable
$ = cheerio.load(result.value)
var num_languages = $('select#searchLanguage option').length
console.log('Wikipedia.org Languages: ' + num_languages);
})
.end();
}
};
or simply using the .execute() command
If you have
<select id='mySelection'>
<option value='cat'>Cat!</option>
<option value='dog'>Dog!</option>
<option value='rat'>Rat!</option>
</select>
You can use the method sendKeys passing either the value or the text
driver.findElement(webdriver.By.id('mySelection')).sendKeys('Rat!');
or
driver.findElement(webdriver.By.id('mySelection')).sendKeys('rat');