i'm using the Jeditable plugin to send request to the server by changing the select box. my problem is, that i want to show the select box at any time, not only if the users (double)clicks the text. i did not found any option on the plugin site, so i ask you if there is another solution (for the plugin).
$('.col-type').editable( 'set-type.php', {
data: function(value, settings) {
return " {'1':'1','2':'2','3':'3', 'selected':'2'}";
},
onblur : "submit",
type : "select"
} );
Idea on inplace editing is to show the form only when you click element. If you always want to show the form use plain old html.
<select>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
Related
I have seen some other posts using below format but it did not work at all, even the select is not opening:
.click(".selectpicker option[value='somevalue']")
But when I wrote like this:
.click("select[id='chooseone']")
it did open the dropdown.
This is how select looks like:
<select class="selectpicker btn dropdown-toggle btn-default" title="Choose one of the following..." id="chooseone" style="">
<option value="chooseone" style="">Choose one</option>
<option value="value1" style="">option 1</option>
<option value="value2" style="">option 2</option>
<option value="value3">option 3</option>
</select>
There is react code in backend, so an onchange event is fired which will display appropriate input field per option and a submit button.
My test is basically:
select an option
fill fields
submit
validate result container
How should I write this code? This is my first time in such thing. Any help is appreciated.
Thanks
UPDATE >>>
This was in Safari and it did not work. But when I installed chromedriver, it did work. Here is the working code:
.click('select[id="searchBySelect"] option[value="any_option_value"]')
This will click the provided option in the select element.
First you need to open the dropdown menu. It looks like you already know this but in any case you would start with:
browser.click('.selectpicker');
Then there are a couple of ways you can get the option you want to click. You can choose a specific option by doing something like this (just modify it to select whichever option you want)
browser.element('css selector', '.selectpicker', function(element) {
browser.elementIdElement(element.value.ELEMENT, 'css selector', 'option[value="value1"]', function(option) {
browser.elementIdClick(option.ELEMENT);
});
});
Or you could get all of the options in an array and click on one of them this way:
browser.elements('css selector', 'option', function(elements) {
browser.elementIdClick(elements.value[0].ELEMENT); //can use any index here as long as you know which one you are looking for
});
tehbeardedone thanks so much for providing your solution. I had to do a small fix to get the elementIdClick() working.
Instead of option.ELEMENT
I had to use option.value.ELEMENT
Since my code snippet had to be added to a page object, this is its final version:
let durationOptionSelector = `option[contains(text(), "${duration}")]`; //dynamic option selector
this.click("#duration_dropdown");
this.api.element("xpath", "#duration_dropdown", function (dropdown) {
this.elementIdElement(dropdown.value.ELEMENT, "xpath", durationOptionSelector, function(option) {
this.elementIdClick(option.value.ELEMENT);
});
});
I have a dropdown that is required for my form. Without Semantic UI everything works as expected. If the user doesn't select anything he gets a message "You must select an optino" or similar from the browser.
<select required>
<option value="" selected="">Please select</option>
<option value="True">Yes</option>
<option value="False">No</option>
</select>
As soon as I style my dropdown with Semantic UI this functionality disappears.
<select class="ui search dropdown" required>
<option value="" selected="">Please select</option>
<option value="True">Yes</option>
<option value="False">No</option>
</select>
This seems to be because Semantic UI hides the original select and adds some bastardized select based on divs. However due to this some of the functionality described above is vanished.
Is there a workaround on this? I want to keep my forms working even with javascript disabled.
Here's a jsfiddle.
As Andrew Pointed out on the issue, this is what you can do:
Hi #Pithikos, you’re correct about the cause of it not working. You could additionally use the validation component that would be falling back to browser validation for clients with disabled JavaScript.
The issue seems to be that Semantic UI converts the select tag into some other HTML including an input tag. The problem is that it doesn't respect the required attribute so the new input tag ends up not having it.
Here's a workaround (after $('.ui.dropdown').dropdown();):
$('.ui.dropdown').each(function(){
$select = $(this).find('select');
$input = $(this).find('input');
if ($select.attr('required') && $input) {
$input.attr('required', 'true');
// Remove required attribute when user or browser focuses on
// the input element and thus getting the selection menu. After
// this event we assume there is a guarantee that the input has
// a value.
$('.ui.dropdown input').on('focus', function(e){
$(this).removeAttr('required');
});
}
});
The workaround works by adding the necessary required attribute. Once that input is focused we assume that a value has been selected and remove the required attribute.
Here's the bug reported on github.
I use the following code in my app with reactive forms.
If I uncomment the [multiple] line, the Choose ... option does not set the dformControl form control object back to status INVALID.
dformControl.multiple by the way returns false. Even if I change the commented line to [multiple]="false", still switching back to the Choose ... option does NOT set the form control status to INVALID.
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
/*[multiple]="dformControl.multiple"*/>
<option *ngIf="!dformControl.value"
value="">
Choose ...
</option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
Bind to the multiple property at the select level to a boolean isMultiple. Then you can change it and the select will change as well. Take a look at the this, I change it using a button. plnkr
<select formControlName="cars" [multiple]="isMultiple">
<option></option>
<option *ngFor="let car of cars" >{{car}}</option>
</select>
It seems when adding the multiple property it is affecting the required validator. I was able to just add an extra validator and it worked as expected.
Validators.compose([Validators.required,Validators.pattern('.+')]
I'm using a series of select elements on a form within an MVC5 view, initialised with the jQuery Chosen plugin. The plugin looks as it should and saves the selected option back to the model successfully. However if any other element on the page fails validation and the page is reloaded, the select elements are back to their original state and the selected option is no longer shown. How can I get the select list to retain its selected option following a reload?
<select class="chosen" id="SE_Visit1" name="#Html.NameFor(model => model.SE_Visit1)">
<option value=""></option>
<option value="0">0 (25)</option>
<option value="1">1 (23)</option>
<option value="2">2 (37)</option>
<option value="3">3 (34)</option>
<option value="4">4 (12)</option>
</select>
$(document).ready(function () {
// initialise the Chosen plugin on the select lists
$('.chosen').chosen({ placeholder_text_single: "Select visit...", width: "75px" });
});
I've tried to add a change event handler on the element to save the selected value which could be used to assign the value again after reload but this just seems to break the page. Any help much appreciated since this particular form has 20 select elements so a lot of values for the user to have to complete more than once.
I'm creating a template showcase theme that has a set of image blocks and i'm having a custom contact form too. As soon as users selects an image it'll dynamically select from my custom form's select option too.
Now i'm trying to hide my select option field,
My code is
<form action="">
<select name="templates">
<option value="THEME001">THEME001</option>
<option value="THEME002">THEME002</option>
<option value="THEME003">THEME003</option>
<option value="THEME004">THEME004</option>
<option value="THEME005">THEME005</option>
</select>
</form>
So far i tried type="hidden" but its not working. Is there any other way to do it other than using ccs visibility:hidden
You can use jquery's hide function like
$("select").hide();
I think you can remove it by Jquery's remove function.
$("select").remove();
Just pick the select element and you can use these Jquery functions to hide or remove your select element
With javascript you have to use like the following (display = 'none')
document.getElementById('THE ID OF YOUR SELECT BOX').style.display = 'none'