In several recent answers I see this code given as the way to retrieve the currently selected value of a <select> tag:
el.options[el.selectedIndex].value
Whereas the MDN documentation says that the .value property of an HTMLSelectElement is equivalent ("The value of this form control, that is, of the first selected option.")
el.value
Is there some reason (old broken browsers?) why the longer version seems to be preferred?
To my best knowledge, the .value way has always worked.
There is actually an extra problem with the first one - what happens when the user has not yet selected an option? Then the .selectedIndex is -1, which will make your script crash.
So go with el.value
Related
I'm trying to implement a live search combo. It suppose to work like this:
When I enter a character into the combo field I read the current value and send it as a parameter to the store's url. In the backend the parameter is used to return any value from the database that contains it, so the store behind the combo gets filled only with those filtered values.
As I continue to enter characters into the combo, the parameter should be updated and sent again to the backend and so on, getting like this a smaller and smaller store.
I tryied to achieve this behaviour using the combo's event keypress, even keyup, but the problem is it's impossible for me to get access to the current value from the combo field.
For example, when I entered the "for" string into the combo, how can I obtain this value using the combo object? comboName.getValue() doesn't work, it returns nothing "".
I already saw the live combo example here: http://docs.sencha.com/extjs/4.2.2/#!/example/form/forum-search.html but doesnt help me at all.
So my big question is: how do i get the current value while still editing the combo's field?
Any help would be appreciated, thanks.
You should be able to use
comboName.getValue();
or
comboName.getRawValue();
Where comboName is your combo box. Are neither working- I note in your post you state getValues() which is an improper method. You may want to also check whether when you're referring to your combo box object, that the reference is actually correct. The first argument from the key events is actually the object itself, so you should be able to do, e.g.
listeners:{
keyup:function(comboBox){
var value = comboBox.getValue() || comboBox.getRawValue();
console.log(value);
}
}
Swapping you the value getting method as appropriate.
I found that the combo already has a quick search behaviour, I just have to set queryMode on 'remote' and some other small configurations. More details here:
Ext Js 4.2.2 combobox queryMode
In Articulate's Storyline product, how does one retrieve the total number of slides (or pages) in a storyfile or project?
There's not much documentation so it's kind of hard to figure out how to query common environment values like this. If we can get the total number of slides then we don't have to manually set a value for it.
One must manually set and update a variable to store the number of slides.
The most lengthy conversation on the matter seems to be found here at the Articulate forums.
In that thread the users and staff describe the need to manually define such a variable.
I asked the question on the official forum more directly here, and so far have not received a response.
Another poster at that forum mentioned using PHP to solve this problem, but unfortunately we can't add the requirement of PHP to the final product. I'm sure some server side language tricks might be used to solve this issue, but that also adds the dependency of a particular server-side language.
The Answer Mark gave is correct. So if you want to track the number of question slides in a quiz you would either hard code the value in a variable such as totalQuestions, or increment it as you go through each slide using adjust variable trigger. To call that value and display it on screen you would just add it to a text field and surround it with "%".
EG. "You have answered %Results.ScorePoints% out of %totalQuestions% questions correctly."
I find it rather pointless to hard code it since it's just as easy to put the value in the text field at the end. Using the increment method seems more logical because then you can add more question slides without having to adjust the variable or results screen each time.
I usually load frame.xml, browse for all slidelink tags and sort all slides by their Id.
Usually you get something like slideid=_player.5xoxGTW6QCh.6bmeRt3tCqP, where 5xoxGTW6QCh is the scene id and 6bmeRt3tCqP is the slide id. displaytext also gives you the slide title.
If you browse for slidetranscript and match the Id for each transcript you also get the slide notes.
Articulate 360 now has an internal (Built-in) variable for this and other counts. See Project.TotalSlides and Menu.TotalSlides
See https://community.articulate.com/series/articulate-storyline-360/articles/storyline-360-add-slide-numbers
What's the correct XPath syntax to check if an option element is currently selected, or just to get the selected option element from a select element, on an open page with which the user, and JavaScript, may have interacted? Is this even possible with XPath, or does it lack the ability to look at DOM properties?
I can't find any documentation on this, and have (speculatively) tried:
//option[#selected=true]
//option[#selected="selected"]
//option[#selected]
but none of these work; they simply don't match any elements.
(In case it matters, I've tried this both using the $x function in the Chrome developer console, and using the find_elements_by_xpath method in Selenium for Python.)
Short answer: it's not possible.
Longer answer: XPath can look at HTML attributes, but it can't look at DOM properties. Selecting an <option> element in a <select> changes the selected property of the <option> to true, and also changes the value property of its parent <select> element, but it doesn't affect the attributes of either, so it is invisible to XPath.
To find <option> elements that have the selected attribute set, which is often how a page author might determine which option is initially selected, you can use //option[#selected]. But this does not find the currently selected <option>; changes that the user makes to the selection are invisible to XPath. There's no guarantee it will even find the initially selected option, since it's possible that the page author didn't put the selected attribute on any elements and either let the browser select the first option by default or had some JavaScript select the initial option via the selected property.
The multiple other answers here claiming that a selector like //option[#selected] can detect selection changes made by the user after the page loads are simply completely wrong.
Of course, if you're able to use CSS selectors instead of XPath selectors, then option:checked will do the job.
The problem could be the " (double quotes).
//select/option[#selected='selected'] - Will match the selected option, i am using this successfully.
//select/option[#selected='selected' and #value='specific value'] - Will only match the selected option if it has a 'specific value', i'm also using this.
If you are still having trouble, it could be an entirely different problem, perhaps there is no option node. I hope this helps.
I think we can use a knowledge from #Mark's answer and account that. Let's just find a node which HAS desired attribute:
tree.xpath('//select/option[#selected]/text()')[0].strip()
I tried "//option[#selected=''] and it has worked for me.
it is able to highlight the selected option within Page objects model.
I would try //option[#selected='true']
i.e. driver.findElements(By.xpath("//option[#selected='true']")).getText();
I am stumped beyond belief.
I have a select box being generated by the cakephp form helper. I am feeding it an array of options, and passing an empty value... pretty standard stuff.
However, my "empty" field is showing up at the very bottom of the list.. not the top. So when the field loads, it just defaults to the first option... which is not the "empty" option.
Not a whole lot of room for error on the code here..
echo $this->Form->input('whatever',array('empty'=>'Choose One','options'=>$categories));
The only small item that might be important, is that $categories is a multi-array, so the select box has optgroups & options.
Is there some quirk/bug out there that I do not know of that is trying to force me to sneak into my scotch supply a few hours ahead of schedule?
edit: using the latest release of cakephp 1.3.x
I think that I once had the same problem.
It turned out to be the data (options array).
Is there an option with an empty key? probably the last one then.
this lead to the scenario I remember and seems to be the exact same thing.
the form helper will override this empty key value pair then and not create a second one.
without more infos from your end this will be difficult to solve.
Does anyone know of an easy way, using jQuery, to select all <select> elements whose val() attribute yields a certain value?
I'm trying to do some validation logic and would like to just select all those elements with a single selector, then apply a warning class to each of their parents. This I know how to do once I select all the elements, but I didn't see a selector that handles this case.
Am I going to have to select all of the <select> elements into a selector, then iterate through them and check each of their values? I was hoping there would be a simpler way.
Thanks.
Why doesn't select[value=x] work? Well firstly because <select> doesn't actually have a value attribute. There is not a single value of a select box: there may be no selected options (there shouldn't normally be, but there can be in at least IE), and, in a <select multiple>, there can be any number of selected options.
Even input[value=x] doesn't work, even though <input> does have a value attribute. Well, it does work, it just doesn't do what you think. It fetches the value of the value="..." attribute in the HTML, not the current value you have entered into the form. The value="..." attribute actually corresponds to the defaultValue property and not value.
Similarly, option[value=x][selected] doesn't work because it is checking the <option selected> attribute from the HTML source (selected attribute -> defaultSelected property) and not the current selectedness of the option (selected property not attribute) - which might have changed since the page was loaded.
Except in IE, which gets the value, selected etc form attributes wrong.
Except (again): Tesserex's example may seem to work, and the reason for that is that that it's using a non-standard jQuery-specific selector, :has. This causes the native querySelectorAll methods of modern browsers to fail, and consequently jQuery falls back to its own (native JavaScript, slow) selector engine instead. This selector engine has a bug where it confuses properties for attributes, allowing [value=x] to do what you expected, and not fail like it should! (Update: this is probably no longer the case in newer jQuery versions.)
Summary: form field state checking and selectors don't mix. Apart from these issues, you also have to worry about escaping issues - for example, what if the value you want to test against contains quotes or square brackets?
So instead, yes, you should check it manually. For example using a filter:
$('select').filter(function() {
return $(this).val()==='the target value';
}).parent().addClass('warning');
(There is a value property in HTML5 and supported by modern browsers, that when you read it gives you the value of the first selected <option>. jQuery's val() is safe to use here because it provides the same method of getting the first selected option even on browsers that don't support this.)
The existing answers don't work on select tags, but I found something that does. Ask for a select that has a selected option.
$("select:has(option[value=blah]:selected)")
You can use :
$("select[value=X]");
where X is the value against which you want to check the select's value.
Attribute selectors Is what you're looking for I believe.
Something like $+('element[attribute="value"]')
See also:
*= anywhere
^= starts with
$= ends with
~= contains word
etc.
You can create a change event that puts the value in a custom attribute on the select element whenever the value changes. You can then use a simple selector to find all of the select elements that have that value. For example:
$("select").on("change", function (e) {
var $select = $(e.currentTarget);
$select.attr("select-value", $select.val());
});
And then you can do this:
var $matches = $("select[select-value='" + searchVal + "']");
$matches will have all of your matching selects.
This is a lot easier than having to iterate through elements. Remember to set select-value to the initial value when rendering the page so you don't need to trigger a change event for each select so the select-value is set.