We Keep Coding

How to do a multi-level select field?

As in my title mentioned I would like to have a select field where I can click on a option Item and then it shows me the suboptions. I only found solutions where you divide it in optgroups but then all the options are visible or I found something which is formatted.
My idea to solve this was the following:
Html
<select data-role="select" data-filter="false" v-on:change="boolValueChanger(testSelector)">
<option value="testSelector">vegetable</option>
<optgroup v-if="testSelector" label="vegetable">
<option value="123123">pepper</option>
<option value="4565">spinach</option>
<option value="64734">broccoli</option>
</optgroup>
<optgroup label="fruits">
<option value="43534">banana</option>
<option value="3345">apple</option>
<option value="45645">orange</option>
</optgroup>
</select>
JS
setup(props) {
return {testSelector: ref(false) };
},
methods: {
boolValueChanger: function (x) {
if (x === true) this.testSelector = false;
else this.testSelector = true;
}
}
My idea was to make a "main menu" where I can select my optgroup (in my example that would be vegetable). If I select that the testSelector would be changed and the optgroups would display but unfortunately that didn't work. My example would be look ok but if I have like 200 options this would be look not so good anymore and a user would have to scroll a lot(I could use a search filter but if the options are unknown to the user this is also not nice).
Does anyone have an idea how I could realize something like that?

JavsScript can not click on element "option"

Below is the HTML code for the element I want to click:
<select id = "per-page-xxxxxxxx" //xxxxxxx is a dynamic string
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
It is basically a dropdown list that allow you to choose how many items to be displayed on current page.
My code to click <option value="100">100</option> is:
var dropdownListXpath = "//select[starts-with(#id,'per-page-')]";
var PublicationPerPageOptionXpath = "//select[starts-with(#id,'per-page-')]/option[#value='100']";
var dropdownList;
var PublicationPerPageOption;
aqUtils.Delay(500);
try {
dropdownList = PageObj.EvaluateXpath(dropdownListXpath);
dropdownList[0].Click();
aqUtils.Delay(500);
PublicationPerPageOption = PageObj.EvaluateXpath(PublicationPerPageOptionXpath);
PublicationPerPageOption[0].Click();
}
catch(err) {
Log.Message("Can not find options to show 100 publications per page.");
}
The result:
Dropdown list is clicked and expanded, then nothing happens afterwards, e.g. option 100 is not clicked
Can anyone please provide any help?

selectmenuchange appending object list only on first event

I have two selectmenus, one of which $('#parent') relates to certain options in the $('#members') menu (related through a data attribute in their HTML). I have a function to limit the choices in 'members' where they relate to the choice selected in the parent menu.
SCRIPT
$("#parent").selectmenu();
$("#members").selectmenu();
var allMembers = $('#members option'); // keep object list of all of the options for the select menu
$("#parent").on("selectmenuchange", function() {
var someMembers = [];
var id = $('#parent option:selected').data('id');
allMembers.each(function() {
if ($(this).data('parent-id') == id) {
someMembers.push($(this))
}
});
$('#members').empty().append(someMembers);
});
At the moment, this works, but only on the first selectmenuchange event - which is odd because using console.log() when the arrays are recreated in the function I can see that the correct have been selected each time, they just don't show in the menu on subsequent changes.
I can't figure out if this is a problem with selectmenuchange or empty().append()
HTML
<select name="members" id="members">
<option data-id="101" data-parent-id="1">Name1</option>
<option data-id="102" data-parent-id="1">Name2</option>
<option data-id="103" data-parent-id="1">Name3</option>
<option data-id="104" data-parent-id="2">Name4</option>
<option data-id="105" data-parent-id="2">Name5</option>
<option data-id="106" data-parent-id="3">Name6</option>
<option data-id="107" data-parent-id="3">Name7</option>
</select>
<select name="parent" id="parent">
<option data-id="1">Parent1</option>
<option data-id="2">Parent2</option>
<option data-id="3">Parent3</option>
</select>

Well the options were changing but it wasn't reflecting in the selectmenu created by plugin. So one of the way is you destroy it and re-initialize the selectmenu as below:
$('#members').html(someMembers).selectmenu('destroy').selectmenu();
DEMO

Instead of selectmenu('destroy') and re-initializing the select menu you can also use selectmenu('refresh'). Refreshing sounds nicer than destroying it each time.
I have updated the fiddle of Guruprasad Rao with the refresh:
fiddle

Selected option Not Setting in new browser Window Tab

<select id="country_name" onchange="changeCounty();">
<option value="IND"> IND</option>
<option value="US">US</option>
<option value="JP">JP</option>
<option value="UK">UK</option>
</select>
i have the above code.
when i select one option it will do some changes to the page.but when i open the page in new tab of browser the already selected option reset. and default selected option set.How do i cop with this?

You need something to pass the value from one page to another, as tabs are by default totally separate pages.
One workaround could be something like this (using LocalStorage) :
// Save value when it is changed by user
function changeCounty(){
if(window.localStorage){
var inputValue = document.getElementById('country_name').value
window.localStorage.set('mySavedValueName',inputValue )
}
//..your original code
}
// Load value if it exists
window.addEventListener('load', function getContryFromLS(){
if(window.localStorage){
var lsvalue = window.localStorage.get('mySavedValueName')
if(lsvalue)
document.getElementById('country_name').value=lsvalue
}
}

Your Html code
<select id="country_name" onchange="changeCounty(this);">
<option value="IND"> IND</option>
<option value="US">US</option>
<option value="JP">JP</option>
<option value="UK">UK</option>
</select>
JQuery Code
$(function(){
var d=localStorage.getItem("selectval");
if(d!=null){
console.log(d);
$("#country_name").val(d);
}
$("#country_name").change(function(){
localStorage.setItem("selectval",$(this).val());
});
});
Demo Here

recreate an array based on options selected

I need help solving a simple requirement.
<select id="my-select1">
<option value="1">This is option 1 ({myop1}|OP)</option>
<option value="2" selected>This is option 2 ({myop1}|OQ)</option>
<option value="3">This is option 3 ({myop1}|OR)</option>
</select>
<select id="my-select2">
<option value="1">This is option 1 ({myop2}|PP)</option>
<option value="2">This is option 2 ({myop2}|PQ)</option>
<option value="3" selected>This is option 3 ({myop2}|PR)</option>
</select>
<select id="my-select3">
<option value="1">This is option 1 ({myop3}|QP)</option>
<option value="2">This is option 2 ({myop3}|QQ)</option>
<option value="3" selected>This is option 3 ({myop3}|QR)</option>
</select>
See the HTML above, I want to recreate my array:
combo = ["abc-{myop1}-{myop2}", "def-{myop2}"];
INTO
combo = ["abc-OQ-PR", "def-PR"];
based on the selected options.
Another thing to note is that I cannot simply change the value of the options of the select box, meaning to say the HTML is somewhat as it is, if it would help, the only part i can restructure on that HTML is the text content between <option></option>
I'm not sure, but I'm already spending a couple of hrs just to solve this problem. Maybe due to my limited jQuery knowledge.
Please help. thanks

Get the selected values into an associative array:
var pattern = {};
var s = $('select option:selected').each(function(){
var m = /\((.*?)\|(.*)\)/.exec($(this).text());
pattern[m[1]] = m[2];
});
Then you can replace each place holder in each string in the array with the corresponding value:
combo = $.map(combo, function(e){
return e.replace(/\{.*?\}/g, function(m){
return pattern[m];
});
});
Demo: jsfiddle.net/C97ma/

Based on the information you provided I'm don't get it 100% I guess. But whatever you're trying to do, I guess jQuerys .map() and $.map() would help you here.
Like
var arr = $('select').find('option:selected').map(function(index, elem) {
return elem.textContent || elem.text;
}).get();
Demo: http://www.jsfiddle.net/4yUqL/78/
Within the callback you can modify/match the text in any way you want/need. In your case I could imagine you want to use a regular expression to match the selected strings and recreate those somehow.

I figure you're using javascript for combining those (it can be done with PHP also)..
You need references to your selects, e.g. :
<script type="text/javascript">
a=document.getElementById("myselect").options[1];
</script>
This will assign the 2nd option value from the 'myselect' select element to the variable 'a'

To begin with I would change the values in the select box like this:
<select id="my-select1">
<option value="OP">This is option 1 ({myop1}|OP)</option>
<option value="OQ" selected>This is option 2 ({myop1}|OQ)</option>
<option value="OR">This is option 3 ({myop1}|OR)</option>
</select>
<select id="my-select2">
<option value="PP">This is option 1 ({myop2}|PP)</option>
<option value="PQ">This is option 2 ({myop2}|PQ)</option>
<option value="PR" selected>This is option 3 ({myop2}|PR)</option>
</select>
<select id="my-select3">
<option value="QP">This is option 1 ({myop3}|QP)</option>
<option value="QQ">This is option 2 ({myop3}|QQ)</option>
<option value="QR" selected>This is option 3 ({myop3}|QR)</option>
</select>
Now to update your array:
var comboDef = ["abc-{myop1}-{myop2}", "def-{myop2}"];
var combo = ["abc-{myop1}-{myop2}", "def-{myop2}"];
function updateArray() {
combo = comboDef;
for (i in combo)
{
combo[i] = combo[i].replace("{myop1}",document.getElementById("my-select1").value);
combo[i] = combo[i].replace("{myop2}",document.getElementById("my-select2").value);
combo[i] = combo[i].replace("{myop3}",document.getElementById("my-select3").value);
}
}
Of course, this could be done better with proper arrays (if you gave your select boxes the same name you could iterate through them using document.getElementsByName()). The basic idea is the replace though which I trust is what you're looking for.