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();
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 a list in a foreach loop and in each one there is an option to edit from a dropdown select box however when adding more than one of these select boxes the whole thing stops working when clicking the service and dropping the options down.
This is the code:
<select id="aroptions" name="aroptions" data-id="<?php echo $get['id'];?>">
<option value="none">Please Select your service</option>
<option class="tw" value="artw">Option 1</option>
<option class="aiop" value="araiop">Option 2</option>
<option class="rr" value="rr">Option 3</option>
<option class="aw" value="aw">Option 4</option>
<option class="gr" value="gr">Option 5</option>
</select>
<div class="twsettings" data-id="<?php echo $get['id'];?>" style="display:none">
<div class="form-group row" style="padding: 10px;">
<label for="username" class="col-sm-4 col-form-label">
Username:
</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;"
name="twusername" id="twusername" size="45" />
</div>
<br><br>
<label for="username" class="col-sm-4 col-form-label">
Series Name:
</label>
<div class="col-sm-8">
<input type="text" data-id="<?php echo $get['id'];?>" class="form-control-plaintext input-lg" style="height: 39px; width:100%;"
name="twseries" id="twseries" size="45" />
</div>
<br><br>
<label for="default" class="col-sm-4 col-form-label">
Set as Default:
</label>
<div class="col-sm-8">
<input type="checkbox" name="main_ar_tw" data-id="<?php echo $get['id'];?>" style="width: 5%;height: 34px;" value="Yes"/><br>
</div>
</div>
</div>
The non working js is below
$('select').change(function(){
if ($(this).val() == "tw"){
$(this).closest('.twsettings').css("display", "none");
$(this).closest('.twsettings').removeClass("show");
} });
`Now i understand that for this to work each dropdown selection has to have a unique id otherwise they will all dropdown at the same time hence the data-id value but for the life of me i cannot remember how to do it.
Any help would be appreciated :)
I've created a fiddle for you to play around with. Note: The data-setting-id is different in each iteration of the loop. JSFiddle]1 (currently the dropdown will only function on the first option as the others are not added in the fiddle)
The first change that I'd make is to make your select elements have unique IDs:
<select id="aroptions<?php echo $get['id'];?>" name="aroptions" data-id="<?php echo $get['id'];?>">
That alone isn't going to do a whole lot for you though. First, you need to make sure that you're hiding all the divs before you show any of them. Then you need to make sure that when you're selecting an option, you use both the selected value and the select element's ID to determine which div to show.
For the hiding, I've given each settings div a class of option-group and in the Javascript we will run $(".option-group").hide();.
To show the correct settings div, we'll concatenate the corresponding option value with the select element ID to create the div's data-setting-id such as data-setting-id="artw<?php echo $get['id'];?>" and data-setting-id="araiop<?php echo $get['id'];?>" You will need to follow this pattern for each option group div.
Then in the Javascript, we do the same and concatenate the selected option with the element ID: var $elm = $('*[data-setting-id="' + selectedOpt + dataId + '"]');
Here's how I updated the output that you provided in the fiddle.
<select id="aroptions123" name="aroptions" data-id="123">
<option value="none">Please Select your service</option>
<option class="tw" value="artw">Option 1</option>
<option class="aiop" value="araiop">Option 2</option>
<option class="rr" value="rr">Option 3</option>
<option class="aw" value="aw">Option 4</option>
<option class="gr" value="gr">Option 5</option>
</select>
<div class="option-group twsettings" data-setting-id="artw123" style="display:none">
<div class="form-group row" style="padding: 10px;">
<label for="username" class="col-sm-4 col-form-label">
Username:
</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="twusername" id="twusername" size="45" />
</div>
<br><br>
<label for="username" class="col-sm-4 col-form-label">
Series Name:
</label>
<div class="col-sm-8">
<input type="text" data-id="123" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="twseries" id="twseries" size="45" />
</div>
<br><br>
<label for="default" class="col-sm-4 col-form-label">
Set as Default:
</label>
<div class="col-sm-8">
<input type="checkbox" name="main_ar_tw" data-id="123" style="width: 5%;height: 34px;" value="Yes" /><br>
</div>
</div>
</div>
<div class="option-group aiopsettings" data-setting-id="araiop123" style="display:none">
<div class="form-group row" style="padding: 10px;">
<label for="username" class="col-sm-4 col-form-label">
Campaign ID:
</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="aiopid" id="aiopid" size="45" />
</div>
<br><br>
<label for="default" class="col-sm-4 col-form-label">
Set as Default:
</label>
<div class="col-sm-8">
<input type="checkbox" name="main_ar_aiop" style="width: 5%;height: 34px;" value="Yes" /><br>
</div>
</div>
</div>
Javascript:
$('select').change(function() {
var dataId = $(this).attr('data-id');
var selectedOpt = $(this).val();
// This is the settings div. Do whatever you want
var $elm = $('*[data-setting-id="' + selectedOpt + dataId + '"]');
$(".option-group").hide();
$elm.show();
//$elm.removeClass("show");
})
Here's the updated fiddle
Note that there are really a number of different ways that you could accomplish this. What I'm giving you here may not be the best or most efficient. I'm just giving you a quick answer using as much of your provided code as possible.
I have an issue. I am trying to append option tag dynamically but its not coming properly using Jquery/Javascript.Here also I am using bootstrap chosen-select class. I am explaining my code below.
<div class="popover-content">
<p>
<select class="chosen-select text-left" style="width:100%;" id="ctid">
<option value="" selected>Select City</option>
</select>
</p>
</div>
My javascript code is given below.
var url="common.php?action=getCity";
$.post(url,{"con_data":conval.options[conval.selectedIndex].value},function(data){
var obj=JSON.parse(data);
if(obj.isData==1){
$('#ctid').find('option').not(':first').remove();
$.each(obj.cid, function() {
$("#ctid").append("<option value="+this.city_id+">"+this.city_name+"</option>");
})
}
})
Here also i am getting the data properly and the loop is also running.But its not reflecting at front end.when I did inspect element i got the below generated html code.
<div class="popover-content">
<p>
<select class="chosen-select text-left" style="width: 100%; display: none;" id="ctid">
<option value="" selected="">Select City</option>
<option value="18">Bhubaneswar</option>
<option value="17">Delhi</option>
<option value="16">Bangalore</option>
<option value="15">Mumbai</option>
</select>
<div class="chosen-container chosen-container-single chosen-with-drop chosen-container-active" style="width: 0px;" title="" id="ctid_chosen">
<a class="chosen-single" tabindex="-1"><span>Select City</span>
<div><b></b>
</div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">Select City</li>
</ul>
</div>
</div>
</p>
</div>
The raw html code is generating the above part after option added dynamically.But my problem is thosze are not display on the front end view.Please help me to resolve thisz issue.
I think each loop every object and gives index as its first param and val as second, try this:
$.each(obj.cid, function(idx, o) {
$("#ctid").append("<option value="+o.city_id+">"+o.city_name+"</option>");
});
If you would like to get the options in the resulting ul, then make sure to append them first before initing chosen.
$.each(obj, function(idx, o) {
$("#ctid").append("<option value=" + o.city_id + ">" + o.city_name + "</option>");
});
$('#ctid').addClass('chosen-select');
$('.chosen-select').chosen();
HTML
<div class="popover-content">
<p>
<select class="text-left" style="width:100%;" id="ctid">
<option value="" selected>Select City</option>
</select>
</p>
</div>
Hope this helps
I'm using Bootstrap ComboBox plugin
and I'm rendering combobox inside mvc4 razor view
#Html.DropDownListFor(model => model.CarFormatId, Model.CarFormats, "Select", new { #id = "SelectCarFormat", #class = "combobox form-control" })
and I'm trying using jquery to fetch select change
$("#SelectCarFormat").on('change', function () {
alert('this is changed!');
});
But I'm getting silence, nothing inside user interface, nothing reported as error inside firebug console?
What I'm doing wrong here?
p.s. just to note here that jquery code is wrapped inside on dom ready
Edit:
Rendered html code is
<select id="SelectCarFormat" class="combobox form-control"
data-val-required="The SelectCarFormatId field is required."
data-val-number="The field SelectCarFormatId must be a number." data-val="true" display: none;>
<option value="">Select</option>
<option value="2">Format A</option>
<option value="3">Format B</option>
</select>
Then you have to use event delegation:
$(document.body).on('change', '#SelectCarFormat', function () {
alert('this is changed!');
});
seems it has been changed with the plugin you are using, so the element you are looking doesn't have any registered event.
Because of this plugin it gets changed into this:
<div class="combobox-container">
<input type="hidden" name="normal" value="">
<div class="input-group">
<input type="text" autocomplete="off" placeholder="Select a State" class="combobox input-large form-control">
<ul class="typeahead typeahead-long dropdown-menu" style="top: 34px; left: 0px; display: block;">
<li data-value="Alabama" class=""><strong></strong>A<strong></strong>l<strong></strong>a<strong></strong>b<strong></strong>a<strong></strong>m<strong></strong>a<strong></strong>
</li>
</ul> <span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret"></span> <span class="glyphicon glyphicon-remove"></span> </span>
</div>
</div>
<select class="combobox input-large form-control" style="display: none;">
<option value="" selected="selected">Select a State</option>
<!-- other options -->
</select>
The above one is taken from here.
As you can see the element you are targeting is not there, actually it has been hidden. So you have to change your event binding to this element:
$(document.body).on('click', '.combobox-container li', function () {
alert('this is changed!');
});
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