I'm using the KendoDropDownList widget and in the markup, the select element has tabindex="600" set on it. But it isn't taking effect. I do see it in the final markup that's rendered to the client.
<span style="" title="" class="k-widget k-dropdown k-header form-control"
unselectable="on" role="listbox" aria-haspopup="true"
aria-expanded="false" tabindex="610"
aria-owns="PropertyAddress_State_listbox"
aria-disabled="false" aria-readonly="false" aria-busy="false">
<span class="k-dropdown-wrap k-state-default" unselectable="on">
<span class="k-input" unselectable="on">CA</span>
<span class="k-select" unselectable="on">
<span class="k-icon k-i-arrow-s" unselectable="on">select</span
</span>
</span>
<select name="PropertyAddress.State" id="PropertyAddress_State"
data-role="dropdownlist" class="form-control" style="display: none;">
<option value="AK">AK</option>
<option value="AL">AL</option>
.
.
</select>
</span>
But tabbing does not trigger a dropdown as a normal select element would. any idea how and if it can work?
In general, the Kendo UI DropDownList moves the tabindex from the original element to the visible focusable element ( in this case).
As to the issue, I could not replicate it:
http://screencast.com/t/I5lKNVbrnjN
Here is the demo:
http://dojo.telerik.com/uVAvA
Related
Html Code:
<select class="select2 ddl visible select2-hidden-accessible" data-allow-clear="true" id="Step1Model_CampaignAdditionalDataTypeId" multiple="" name="Step1Model.CampaignAdditionalDataTypeId" tabindex="-1" aria-hidden="true">
<option value="1">Optus AC Number</option>
<option value="2">Date Of Birth</option>
<option value="3">Pass Phrase</option>
<option value="4">Transaction Id</option>
</select>
<span class="select2 select2-container select2-container--default select2-container--above" dir="ltr" style="width: 121.047px;">
<span class="selection">
<span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1">
<ul class="select2-selection__rendered">
<li class="select2-search select2-search--inline">
<input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li>
</ul>
</span></span>
<span class="dropdown-wrapper" aria-hidden="true">
</span></span>
I'm using following code(POM) in Selenium Webdriver(with java) to select:
public static By campAddDataType= By.id("Step1Model_CampaignAdditionalDataTypeId");
waitTime = new WebDriverWait(driver,20);
waitTime.until(ExpectedConditions.visibilityOf(driver.findElement(CommonOR.campAddDataType)));
String js = "arguments[0].hidden='false'";
((JavascriptExecutor) driver).executeScript(js,(driver.findElement(CommonOR.campAddDataType)));
CampAdd = new Select(driver.findElement(CommonOR.campAddDataType));
CampAdd.selectByVisibleText("Date Of Birth");
This drop-down list appears when user mark one option to true. So I believe that's why --> aria-hidden="true"
And for this option to make false, I ran java script executor but still the required element doesn't get selected from drop-down list.
Please suggest some solution.
Have you tried the below.
listItem = driver.findElement(By.xpath("//select[#id='Step1Model_CampaignAdditionalDataTypeId']/option[.='Date Of Birth']"))
((JavascriptExecutor) driver).executeScript("arguments[0].click();",listItem);
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/
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.
I have dropdown in my form which has a CSS style defined on pageload and is hidden and the code is like
<div class="col-md-6">
<div class="form-group">
<div id="City" hidden="" style="display: none;">
<label class="control-label" for="City">City</label>
<select name="City" id="City" class="selectboxit visible" style="display: none;"></select><span id="CitySelectBoxItContainer" class="selectboxit-container selectboxit-container" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns="CitySelectBoxItOptions" aria-labelledby=""><span id="CitySelectBoxIt" class="selectboxit selectboxit visible selectboxit-enabled selectboxit-btn" name="City" tabindex="0" unselectable="on" style="width: 47px;"><span class="selectboxit-option-icon-container"><i id="CitySelectBoxItDefaultIcon" class="selectboxit-default-icon" unselectable="on"></i></span>
<span
id="CitySelectBoxItText" class="selectboxit-text" unselectable="on" data-val="" aria-live="polite"></span><span id="CitySelectBoxItArrowContainer" class="selectboxit-arrow-container" unselectable="on"><i id="CitySelectBoxItArrow" class="selectboxit-arrow selectboxit-default-arrow" unselectable="on"></i></span></span>
<ul id="CitySelectBoxItOptions"
class="selectboxit-options selectboxit-list" tabindex="-1" style="min-width: 5px;" role="listbox" aria-hidden="true"></ul>
</span>
</div>
</div>
</div>
I am able to successfully append the options to this drop down, however they get inserted to a drop down without my CSS style as shown in the below image
After the data is added to drop down the HTML looks like
<div id="City" hidden="" style="display: block;">
<label class="control-label" for="City">City</label>
<select name="City" id="City" class="selectboxit visible" style="">
<option>--Select City--</option>
<option value="1">City 1</option>
<option value="3">City 11</option>
<option value="4">City 111</option>
</select><span id="CitySelectBoxItContainer" class="selectboxit-container selectboxit-container" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns="CitySelectBoxItOptions" aria-labelledby=""><span id="CitySelectBoxIt" class="selectboxit selectboxit visible selectboxit-enabled selectboxit-btn" name="City" tabindex="0" unselectable="on" style="width: 47px;"><span class="selectboxit-option-icon-container"><i id="CitySelectBoxItDefaultIcon" class="selectboxit-default-icon" unselectable="on"></i></span>
<span
id="CitySelectBoxItText" class="selectboxit-text" unselectable="on" data-val="" aria-live="polite"></span><span id="CitySelectBoxItArrowContainer" class="selectboxit-arrow-container" unselectable="on"><i id="CitySelectBoxItArrow" class="selectboxit-arrow selectboxit-default-arrow" unselectable="on"></i></span></span>
<ul id="CitySelectBoxItOptions"
class="selectboxit-options selectboxit-list" tabindex="-1" style="min-width: 5px;" role="listbox" aria-hidden="true"></ul>
</span>
</div>
and the JQuery code looks like and the targetdropdown value would be "City" here and the Id and values appropriately
$("div#City").toggle();
$('select[name="'+targetdropdown+'"]').empty();
jQuery('select[name="'+targetdropdown+'"]').
append('<option> --Select '+targetdropdown+'-- </option>');
$.each(res[0],function(index, element) {
var newOption = '<option
value="'+element.Id+'">'+element.Name+' </option>';
jQuery('select[name="'+targetdropdown+'"]').
append(newOption);
});
Can you please help me resolve the data being inserted to CSS styled drop down which is empty as you can see in the image
It seems you are using SelectBoxIt jQuery plugin for Custom styled dropdown list. When you done adding dynamic option to your div call .refresh() method.
Add below line at the end of your javascript code.
$('select[name="'+targetdropdown+'"]').data("selectBox-selectBoxIt").refresh();
I have the following problem I have a dropdown on my website. But because I wanted to add style to it, I hid it and have a bootsrap dropdown showing over it.
This is my html structure:
<div class="input-box">
<select name="super_attribute[139]" id="attribute139" class="required-entry super-attribute- select selectpicker" style="display: none;">
<option value="">Maat_dames</option>
<option value="44" price="0">s</option>
<option value="43" price="0">m</option>
<option value="42" price="0">l</option>
<option value="41" price="0">xl</option>
<option value="40" price="0">2xl</option>
<option value="39" price="0">3xl</option>
<option value="38" price="0">4xl</option>
</select>
<!-- The normal dropdown -->
<!-- The bootstrap dropdown -->
<div class="btn-group bootstrap-select required-entry super-attribute-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="attribute139" title="Maat_dames">
<span class="filter-option pull-left">Maat_dames</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" data-normalized-text="<span class="text">Maat_dames</span>">
<span class="text">Maat_dames</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
I'm trying to change the text Maat_dames to simply just Maat, I've tried the following jQuery code:
if(jQuery('span .filter-option').length == 0){console.log("fail")}
if(jQuery('span .filter-option.pull-left').length == 0){console.log("fail")}
if(jQuery('span .filter-option .pull-left').length == 0){console.log("fail")}
When I check the console log, it returns fail in all three cases, so the element isn't found. Why is that the case?
EDIT
All the answers suggest removing the space between span and .filter-option and while it doesn't work on my site, it does work when I try to run the code snippets in the comments en when I try to recreate it in a JSFiddle.
Could it be the case that jQuery can't find the element since it is dynamically created by a plugin?
You are using a descendant combinator (a space).
span .filter-option means any element that is a member of the class filter-option and has an ancestor that is a span.
The only elements which are members of that class in your document are spans themselves and do not have ancestors that are also spans.
Remove the spaces from the selectors.
if(jQuery('span.filter-option').length == 0){console.log("fail")}else{console.log('success'); }
if(jQuery('span.filter-option.pull-left').length == 0){console.log("fail")}else{console.log('success'); }
if(jQuery('span.filter-option.pull-left').length == 0){console.log("fail")}else{console.log('success'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-box">
<select name="super_attribute[139]" id="attribute139" class="required-entry super-attribute- select selectpicker" style="display: none;">
<option value="">Maat_dames</option>
<option value="44" price="0">s</option>
<option value="43" price="0">m</option>
<option value="42" price="0">l</option>
<option value="41" price="0">xl</option>
<option value="40" price="0">2xl</option>
<option value="39" price="0">3xl</option>
<option value="38" price="0">4xl</option>
</select>
<!-- The normal dropdown -->
<!-- The bootstrap dropdown -->
<div class="btn-group bootstrap-select required-entry super-attribute-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="attribute139" title="Maat_dames">
<span class="filter-option pull-left">Maat_dames</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" data-normalized-text="<span class="text">Maat_dames</span>">
<span class="text">Maat_dames</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
Replace jQuery('span .filter-option') with jQuery('span.filter-option').
Currently jQuery('span .filter-option') is finding element with class filter-oprion inside span tags in DOM.
When you write jQuery('span.filter-option') it will find span elements with class filter-option in DOM.
('span.filter-option').length maybe?