Develop Reference

Replace div based on selected dropdown using Jquery

I want to replace the languages in my div when I select a country.. Here's what I got so far but is not working
My fiddle is in the comment, i cant seem to past it here

Two changes you need to do 1. value should be 1,2,3
<ul class="country-list" id="country-list" onchange="getval(this);">
<li value="1" class="Germany">Germany</li>
<li value="2" class="Singapore">Singapore</li>
<li value="3" class="Philippines">Philippines</li>
</ul>
and
$(".country-list li").click(function() {
$('#country-dropdown').text($(this).text());
$('#country-dropdown').click();
console.log(('.d'+$(this).val()));
$('.lang').hide();
$('.d'+$(this).val()).show();
});

How to manipulate a dropdown menu made of ul and li elements in Chromeless

I am facing a drop down menu made of ul and li elements:
<ul class="o_dropdown_theme_values">
<li class="" tabindex="-1">
<label class="myclass" tabindex="0">Category 1</label>
</li>
<li class="" tabindex="-1">
<label class="myclass" tabindex="0">Category 2</label>
</li>
...
</ul>
I know two ways of modifying a dropdown menu with Chromeless:
.evaluate((dropDownValue) => {
select = document.querySelector('select#category1')
select.value = dropDownValue
}, dropDownValue)
and
.click('#id')
.type("first letters of option", '#id')
.click('#id option[value="'+dropDownValue+'"]')
but because of the structure of the menu with ul and li, I am unable to use these.
I also tried to click on the menu and then press the tab key as many times as necessary to select the correct option, as if I was navigating the menu with my keyboard. But the Tab keys I am sending are not taken into account. I was able to send ONE (and only one) DOWN key (and not TAB) to the menu, but nothing more.
How can I manipulate this kind of menu? Any workaround based on javascript would be appreciated.

I found a way in the end.
Use the .focus(#CSSselector) command to highlight the correct option and then valide with .press(13) (Enter key).
So that's a third way to manipulate dropdown menus in chromeless

Using a multi-level drop down menu in a select operation

I am attempting to create a HTML form that needs to be able to accept 160 possible values for a given field, this will need to be done over and over again so I want to make it as simple as possible to find the value that I need. Everything in my list can be grouped into sub categories, so I am imagining a multi-level drop down menu type approach like here. I have seen a plethora of how-tos and sites informing me on how to do similar things where I simply make an unordered list of unordered lists i.e.:
<ul class="mlddm">
<li>Entity Provider
<ul>
<li>Name</li>
<li>DBA</li>
<li>Entity Type</li>
</ul>
</li>
<li>Individual Provider
<ul>
<li>Name
<ul>
<li>Full Name</li>
<li>Prefix</li>
<li>First Name</li>
<li>Middle Name</li>
<li>Last Name</li>
<li>Suffix</li>
<li>Professional Suffix</li>
</ul>
</li>
<li>Birth Date
<ul>
<li>Full Birth Date</li>
<li>Day Of Birth</li>
<li>Month Of Birth</li>
<li>Year Of Birth</li>
</ul>
</li>
<li>Education
<ul>
<li>Institution</li>
<li>City</li>
<li>State</li>
<li>Country</li>
<li>Start Date</li>
<li>End Date</li>
<li>Graduation Date</li>
<li>Degree</li>
</ul>
</li>
</ul>
</li>
</ul>
and then apply some CSS and JS magic to the HTML to accomplish this.
This would be fine if I was using a menu to link me to another page, but I need to take a string value from what was selected and use it in a form. The problem is that I am fairly new to HTML and do not know how to extract what is selected from the above list and place it into my form (probably the easiest solution to this problem).
Another approach I have seen to this would be to indent the select list using styles and groups to create kind of a tree style view like this:
<select name="select_projects" id="select_projects">
<option value="">project.xml</option>
<optgroup label="client1">
<option value="">project2.xml</option>
</optgroup>
<optgroup label="client2">
<option value="">project5.xml</option>
<option value="">project6.xml</option>
<optgroup label="client2_a">
<option value="" style="margin-left:23px;">project7.xml</option>
<option value="" style="margin-left:23px;">project8.xml</option>
</optgroup>
<option value="">project3.xml</option>
<option value="">project4.xml</option>
</optgroup>
<option value="">project0.xml</option>
<option value="">project1.xml</option>
</select>
This would be a nice solution if I were presenting say 40 options at most but where I have 160 options this will be overwhelming and simply will not do.
The last solution might be to have drop downs that take from each other to limit the options in the next drop down like here.
This is also less than ideal as it requires us to select information hat does not actually get saved, it is simply to narrow options. I will take this option if all else fails but I am hoping that someone might be able to help me out.

I've use this jQuery plugin on projects in the past and it has worked a treat. There are lots of different options for the configuration, and all of the html is easily stylable with your own CSS if you don't like the default look.

Form drop down(spinner) & trying to change the value to the selected items value

I am using a form spinner(essentially a form drop down in android terms.)
I want to be able to change the value to the selected spinner item instead of what it does now which is nothing.
How can I make it so that it does change value when selected?
Here is my jsfiddle with a working spinner but its not changing values on select yet
Here is the html code that makes the spinner:
<div class="form-spinner">
Set Repetition
<ul class="spinner">
<li class="spinner-item">Once</li>
<li class="spinner-item">Daily</li>
<li class="spinner-item">Weekly</li>
<li class="spinner-item">Monthly</li>
<li class="spinner-item">Custom</li>
</ul>
</div>

to update the text on click
$('.spinner-item').click(function (item){
$('.toggle-spinner').text( $(this).text());
});

How do I get the text of the next span element?

Below is my HTML. I'm at the <select> element, how do I get the text from the next span element on the page? I've tried several things, including $( this ).nextAll( 'span:first' ).text(); where $( this ) is my select element, but I'm not getting the desire result.
<ul id="questions">
<div>What do you want information about?</div>
<li>
<p>
<select><!-- This is where I'm at. -->
<option>Click to select...</option>
<option data-next_select_name="foos">
a foo
</option>
<option data-next_select_name="bars">
a bar
</option>
</select>
</p>
<div>
<a>
<span>a foo</span><!-- I want the text out of this span. -->
<div><b></b></div>
</a>
<div>
<div><input type="text" /></div>
<ul>
<li>Click to select...</li>
<li>
a foo
</li>
<li>
a bar
</li>
</ul>
</div>
</div>
<p></p>
</li>
</ul>

nextAll selects next siblings of an element, the span element is not one of the siblings of your selects element:
$(this).parent().next().find('span:first').text()

Just incase your html structure changes and .next() isn't an option, I always prefer to go up to the definitive parent (in this case the list-item)
$(this).closest('li')
.find('span').first().text();
Random side note: .first() is faster than :first

$( this ).parent().next().find('span:first').text()