Hi i used select2 (https://select2.github.io/) in my site and it's not working there. on click classes etc changed like example one but it didn't shows the select box options and there is no error in console.
I am using multi select option of it.
Here is code:
<select name="xo_pages_show_name[]" class="spages" multiple="true">
<option value="4">Optin Demo</option>
<option value="2">Sample Page</option>
</select>
Here is jquery code in custom file and included in footer.
$(".spages").select2({
placeholder: "Select Pages"
});
Here is the frontend screenshot: http://i.prntscr.com/0d079920de3b4e3081a153b45cb9753a.png
Any help ?
No it was just problem with z-index.
Main container z-index was more than inner one. so it was not showing
Related
I am new for rspec and ruby on rails. I would like to select one of the options shown in the attached image.
Can anyone suggest a simple way to click on the option?
This is what I have tried
el = find("#menu-campaign_type_id")
el2 =find("ul")
and I tried to find option inside el2 but I am not able to find it.
Thanking you in advance
Not sure it will work on an ul tag but you should try using capybara with rspec, then you could do things like this:
within :css, '#menu-campaign_type_id' do
select 'Awareness'
end
a simpler option would be
page.find('#menu-campaign_type_id > ul > option:first').select_option
I think you can do this with capybara test cases. In capybara with selenium web driver.
But before that, you need to correct your drop-down code, there is an option inside ul tag, but it should be a select tag.
drop-down example
<div class="test">
<select>
<option value="op1">option1</option>
<option value="op2">option2</option>
</select>
</div>
You can achieve this by executing the javascript
page.execute_script <<-JAVASCRIPT
$("div.test select").val("op2");
JAVASCRIPT
you can also try this
select 'option2', from: 'test', visible: false
hope it will help you to resolve.
Can you try this
find("ul.MuiList-root").find(:option, Awareness).select_option
I've created a vue.js component for a select2 jquery component
The problem with the component is that the select is invisible (not shown) if the component's template is just the raw select:
<select v-select2="val">
</select>
(using the chrome inspector, I can see the select is effectively converted to a select2 by the jquery plugin BUT with 1x1 px dimensions)
... the problem is that everything works if I wrap the select with a DIV at the template:
<div>
<select v-select2="val">
</select>
</div>
I'm using a vue's directive (v-select2) to transform the select into a select2
Here it's the full code https://jsfiddle.net/futuretelematics/tkL8zxby/
The problem may be connected with the fact that select2 hides original select, creates new span and appends it next to the original one. You end up with a fragment instance as described in Vue.js documentation which is discouraged.
It is therefore recommended to always have a single root-level, plain element in templates.
I am using JQuery Mobile for a mobile website, and for localization I am using i18next. I have an issue in my form, here it is :
<form id="form" method="POST" action="webservices/action.php">
<select id="subject">
<option value='0' data-i18n="contact.email" selected></option>
<option value='1' data-i18n="contact.name"></option>
<option value='2' data-i18n="contact.object"></option>
</select>
</form>
The localization works fine, I have the desired text displayed. However, the first option is not displayed and it is not possible to select it (it is possible to select other options). When looking at the select object in Javascript, it seems that the correct index is selected., therfore it is a UI problem.
I don't have any problem when not using i18next.
Anyone have an idea how to fix this issue ?
I found a workaround. I noticed that when I sent my form and reset it, the dropdown list was correclty displayed. So after initializing i18n, I used this:
document.getElementById("form").reset();
The form is now displayed correctly.
When using the ui-select2 (https://github.com/angular-ui/ui-select2), the preselected option is not shown properly.
I created a plunkr: http://plnkr.co/edit/Ek86jUciPo7rgBnbKdFc
When the page is loaded, the model of the select is set to the second option. And somehow, it is properly set in the select box, see: https://dl.dropboxusercontent.com/u/1004639/stackoverflow/screenshot-select2.png. But the value is not shown above the text box. Or in the select box when the select box is closed.
PS: I tried it without ng-options. Same problem.
I can get it working using ng-repeat and ng-selected. Unfortunately, though, when you use ng-repeat, you can only bind to a string. It's not ideal, but the choice does start out pre-selected.
Here's a working http://plnkr.co/edit/jodn35fvUQpdD2d5BpoC
<select ui-select2="" ng-model="selectedId" >
<option value="">Choose...</option>
<option ng-repeat="option in options" value="{{option.id}}" ng-selected="{{option.id == selectedId}}">{{option.name}}</option>
</select>
And I updated the JS to add this line:
$scope.selectedId = $scope.selected.id;
https://github.com/angular-ui/ui-select2#working-with-dynamic-options
ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead.
I am using jQuery UI MultiSelect Widget. I want my list to have 5 options and the first one("Please Choose") to be selected by default, however I want only the last four options as to be visible and selectable from the users when the list is unfolded.Any good idea how to do that?
Thank you
You must have checked the documentation of that plugin, it has everything to customize it in all possible manner. Check out below sample code:
HTML
<select name="gender" id="gender" multiple="multiple">
<option value="MAN">MAN</option>
<option value="WOMAN">WOMAN</option>
</select>
Script
$(document).ready(function(){
$("select").multiselect({
noneSelectedText: 'Choose Options'
});
});
Fiddle