I'm desperately trying to change the option value in of a select at pageshow and it does nothing.
I don't know how to change it
<select name="sliderAutoConnect" id="sliderAutoConnect" data-role="slider">
<option value="1">Off</option>
<option value="2">On</option>
</select>
and the script :
$("#sliderAutoConnect option[value=2]").attr('selected', 'selected');
$('#sliderAutoConnect').selectmenu('refresh');
You need to refresh the slider widget instead of selectmenu. Try this instead:
$('#sliderAutoConnect').slider('refresh');
Everything else worked for me when i tested it. I just changed that one line.
Related
Using Laravel livewire, bootstrap 5 modal and select 2.
Select2 (s2) without multiple works fine. It's populated, selections save to the component, clearing is also fine.
When an s2 has multiple attribute, removing a selected option clears all the options and nothing is displayed in the results drop down. When adding a selection, this doesn't happen.
If I do a dispatchBrowserEvent and re-init the s2 it does work again.
My question is why does removing an s2 option require a re-init but an add doesn't.
Seems to be something to do with the rendering in render().
Some code...
Blade:
<div wire:ignore>
<select id="selectedTrades" wire:model.defer="selectedTrades" class="select-2" multiple="multiple" data-field="selectedTrades" data-allow-clear="false">
#foreach ($contractor_trades as $trade)
<option value="{{ $trade['id'] }}">{{ $trade['name'] }}</option>
#endforeach
</div>
Standard stuff. wire.ignore around the s2. The modal has wire:ignore.self.
JS:
$('.select-2').on('change', function (e)
{
var $this = $(this);
livewire.emit('setSelect2Property', $this.attr('data-field'), $this.val());
});
Component:
public function setSelect2Property($property, $value)
{
$this->$property = $value;
}
Just sets $this->selectedTrades to the array sent.
Adding:
The drop down has the options as expected.
Removing:
The thin light line under it is the container for the results that's now empty. The original select element does still have its options.
If I remove the livewire.emit from the js to test, the s2 behaves correctly.
I think it has to do with the components render method. I can't figure out what is happening different when I add versus remove.
I got this to work. The problem was the dropdownParent element I was using. I had it set to the modal. Setting it to the immediate parent element and it worked as expected.
I have a datalist with some options and I want to select the first one using Cypress. How do I do that?
I need to click on the option, simply typing in the value is not what I want, because when an option is selected, a Javascrip function is called. So it's more like How do I click on a datalist option using Cypress?
cy.get('#foods').first().click({force:true})
Does not work.
Presuming the Ruby datalist is like this
<datalist id="foods">
<% Foods.all.each do |food| %>
<option value="<%= food.name %>"></option>
<% end %>
</datalist>
gives this in the DOM
<datalist id="foods">
<option value="Lamb">
<option value="Beef">
<option value="Fruit">
</datalist>
You can get the first option with
cy.get('#foods') // gets the outer datalist
.find('option') // returns all options inside
.first() // take the first
.click({force:true})
for other option, e.g 3rd
cy.get('#foods') // gets the outer datalist
.find('option') // returns all options inside
.eq(2) // take the third
.click({force:true})
The {force:true} is only required because the list is not opened.
It may be better to open it first and click without force, as a page error can be masked by using {force:true}.
cy.get('#foods') // gets the outer datalist
.invoke('show') // open list
.should('be.visible')
.find('option') // returns all options inside
.first() // take the first
.click()
I have a long page organized by state. I have a Select2 element at the top of the page that I would like to use to let visitors select a state and jump to that state further down the page via an anchor.
I’ll post my code in a bit, but let me first describe the issue. My solution works in most browsers, but I’ve discovered that it fails in IE11 and Edge. In those browsers, I see the desired content location flicker briefly into view before the page gets pulled back to having the Select2 element at the top of the page. It’s like Select2 really wants to be in view.
Here is my (simplified) code:
HTML
<select class="jumpmenu">
<option value="">Jump to a State</option>
<option value="#alabama">Alabama</option>
<option value="#alaska">Alaska</option>
[ ... ]
</select>
<a name="alabama" id="alabama"> </a>
<h2>Alabama</h2>
<a name="alaska" id="alaska"> </a>
<h2>Alaska</h2>
[ ... ]
JQUERY
$(".jumpmenu").select2();
$('.jumpmenu').on('select2:select', function (e) {
window.location.hash = this.options[this.selectedIndex].value;
});
Is there a better way for me to construct this jump menu so that it will jump properly in IE and Edge?
I got a few suggestions from John30013 on the Select2 forums, and one of them worked well for me. I ended up setting a short setTimeout, which allowed the select to close before jumping to the anchor. Here's the code that worked for me:
$('.jumpmenu').on('select2:select', function (e) {
newHash = this.options[this.selectedIndex].value;
setTimeout(function(){ window.location.hash = newHash;},100);
});
How can I change value of combobox using Tchromium Delphi?
Version Tchromimum DCEF3
<td class="droplabels" nowrap="nowrap">Лист</td>
<td colspan="3">
<div class="ui-widget">
<select id="sheet" name="sheet" style="font-size:0.7em;width:761px;"
class="form_select" onchange="showSheet(this.value);">
<option value="1" selected="selected">Account List </option>
<option value="2">Merchant list</option>
</select>
</div>
</td>
try this but not worked...
Chromium1.Browser.MainFrame.ExecuteJavaScript('document.getElementById("sheet").selectedIndex=2;', 'about: blank', 0);
Chromium1.Browser.MainFrame.ExecuteJavaScript('document.getElementById("providerField").onchange();', 'about: blank', 0);
There's an ExecuteJavascript on it. So you can manipulate everything on it with Javascript.
If you want to change that combobox value , then change it with using DOM.Get its id using "document.getElementById", then change its selectedIndex by accessing its selectedIndex.
But , that'll not triggering onChange event.
So , you need to call it manually using javascript again.
Here's the code to change it's selectedIndex :
Chromium1.Browser.MainFrame.ExecuteJavaScript('document.getElementById("sheet").selectedIndex='+comboboxIndex+';', 'about: blank', 0);
To trigger onChange event manually :
Chromium1.Browser.MainFrame.ExecuteJavaScript('document.getElementById("providerField").onchange();', 'about: blank', 0);
Change Chromium1 to your TChromium variable object name.
Here's for more information about Select
http://www.w3schools.com/jsref/dom_obj_select.asp
If you don't know anything about DOM , read it here
http://www.w3schools.com/htmldom/default.asp
In simple way , you just need to get the DOM object of it then do what you want by accessing and modifying its properties
Sorry for my bad English.
edited
I am writing a web shop with Jquery Mobile where I want to use a select menu to browse the categories available. When the user selects a category I want to navigate to the same page but with a couple of parameters added to the url. This is my markup for the select:
<asp:Repeater id="productCatSelect" runat="server">
<HeaderTemplate>
<select id="productCatSelectMenu" data-native-menu="false" onchange="categoryClick();" class="button" data-theme="a">
<option data-placeholder="true">All Categories</option>
</HeaderTemplate>
<ItemTemplate>
<option value="<%# Eval("NodeID") %>" ><%# Eval("Description")%></option>
</ItemTemplate>
<FooterTemplate>
</select>
</FooterTemplate>
</asp:Repeater>
And here is the javascript:
function categoryClick() {
var mySelect = $("#productCatSelectMenu");
if (mySelect.val() != '') {
if (mySelect.val() == 0) {
$.mobile.changePage("shop.aspx", {reloadPage: true, transition:"slide"});
} else {
$.mobile.changePage("shop.aspx?c=" + $("#productCatSelectMenu").val() + "&n=" + $('#productCatSelectMenu :selected').text(), {reloadPage: true, transition:"slide"});
}
}
}
My problem occurs when I have navigated once and try to choose another option from the select, my javascript still retreives the previous value; the select does not seem to reset! However, when I press F5 and reload the page manually the menu works again, until I have used it once of course.
Anyone have any ideas on how I can fix this? As you can see in the javascript the "reloadPage: true" attribute does not fix the problem.
If you're using jQuery Mobile's custom select field, try
$("#select_id").selectmenu('refresh', true)
This will successfully reset the select options rendered by jQuery mobile.
You're going to need to reset this yourself, maybe try:
$('select#productCatSelectMenu option').attr('selected', false);
or
$('select#productCatSelectMenu option').removeAttr('selected');
or
$('select#productCatSelectMenu').children('option').removeAttr('selected').filter(':nth-child(1)').attr('selected', true);
or
$('select#productCatSelectMenu').attr('selectedIndex', -1);
I had a similar problem the other day
Reset/Un-select Select Option
I have no clue why Jquery mobile select is working the way it is. None of the above worked for me except for what is mentioned here. I am using the current versions
jquery-1.10.2.min.js
jquery.mobile-1.4.2.min.js
https://forum.jquery.com/topic/resetting-select-menu
var myselect = $("select#useOfColor");
myselect[0].selectedIndex = 0;
myselect.selectmenu("refresh");
Have you tried $('#productCatSelectMenu').selectmenu('refresh');?
You can check information about the refresh method in the documentation