Develop Reference

jQuery dropdown option:first selected

I am using some jQuery to populate various dropdowns. I was able to get the jquery to show current value as the first option.
However, I need it to not only show as the first option, but as the currently selected option so that the selection doesn't appear twice in the dropdown.
As shown in the images below, you see the current value is Target. But after clicking the dropdown button, Target is listed twice:
Here is what the current jQuery looks like:
$(function()
{
$eexist = $(this).attr('data-exist');
$('#eexist option:first').val($eexist).text($eexist);
}
Which goes into this modal form dropdown select:
<div id="editCustModal">
<form id="editCustForm" name="editCustForm">
<label for="eexist">Existing/Target</label>
<select class="form-control" id="eexist" name="eexist">
<option></option> // keeping this or not does nothing
</select>
</form>
</div>
The value and the text are the words Target and Existing.
To reiterate, if the current value is Target, then when you click on the dropdown, you should only see Target as the currently selected item AND only see it once.

If you want to select first option then below is the code:
$('select option:first-child').attr("selected", "selected");
But if you want to select the current value then below is the code:
$('#eexist option:first').val($eexist);
this should only work if $eexist exists as value in dropdown
Since you didn't provide much so it's hard to tell..At least provide a jsfiddle link when you ask a question

Do it this way...
$(document).ready(function(){
$("#myselect").change(function(){
var toR = $('<div>').append($('#myselect option:selected').clone()).html();
console.log(toR);
$("#myselect option:selected").remove();
$("#myselect").html(toR+$("#myselect").html());
});
});
Working Fiddle

Change option in select drop down using javascript

Firstly apologies if this is a dumb question, I'm rather new to javascript.
I have a select box which is generated by my organisations CMS. I can't change the drop down's content or how it is generated. What I would like to do however is when the page is loaded, change the default (or "selected") option based on a particular value. The other problem is the default is already set in the select drop down is created in HTML. If I could actually change the way options for the select drop down I could easily create some javascript to set the default selection, unfortunately I can't. I'm completely lost. Any assistance would be greatly appreciated.
Code used:
I unfortunately cannot change this:
<select name="q528696:q1" id="q528696_q1" class="sq-form-field"><option value="0" selected="selected">Address adult language literacy and numeracy | 688</option>*More options here*</select>
This is the javascript used. It's very simple:
<SCRIPT> window.onload=updateSelect();
function updateSelect() {
document.getElementById('q528696:q1').value=25;
};
</SCRIPT>

To change a selected option using JavaScript is very simple. But still, I'll break it down.
Let's start off with a simple drop down list with three options. The select tag will have an id of "change".
<select id="change">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
We want it so that when we press a button "Two" will be the selected option instead of "One". We'll start making our button and making a basic function.
<input type="button" value="Change Selected Option" onclick="changeS()"/>
<script>
function changeS() {
}
</script>
In this function we add the following code
document.getElementById('change').getElementsByTagName('option')[1].selected = true;
Let's take a look at what it's doing.
First, we target the "select" tag with document.getElementById.
Then we get all the elements with a tag name of "option" in the "select" element.
The "[1]" means that we target the second option in the list. The reason we have "1" not "2" is because JavaScript starts counting at "0". If we wanted to target the third option, we would put "[2]".
After that, we just say that we want that specific option in the select tag to be the selected option.I hope it's simple enough and that my explaining was worthwhile :)

I'm answering to this question: How do I change the value of a select element's option? Here's code with comments to help out.
<!--First we'll make a a select element with an option-->
<select>
<option value="Unchanged Value" id="1"></option>
</select>
<!--Now we'll create a button that'll display the value of this option. Refer to the "displayOptionValue" function down below to find out how this is done-->
<input type="button" onclick="displayOptionValue()" value="Display Option Value"/>
<<input type="button" onclick="changeOptionValue()" value="Change Option Value"/>
<!--Here's where the value will display-->
<p id="demo"/>
<script>
//This will get the option's value and display it in the "p" tag
function displayOptionValue() {
var x = document.getElementById("1").value;
document.getElementById("demo").innerHTML = x;
}
//Now we'll change the value
function changeOptionValue() {
document.getElementById("1").value = "Changed Value";
}
</script>
That's what I understand the question to be. If it's not, tell me in the comments and I'll post another answer. Also, if you run the code in your browser, first press "Display Option Value" then "Change Option Value" and then press "Display Option Value" again to see the changes. Once again, if this isn't your question, let me know in the comments.

Replace some of the text in select box option

I have this Show/Hide select box (JS Fiddle) that gets a classname from a selected option and hides a corresponding unordered list item. I am at a loss to use replace() to replace the text Hide with Show or vice versa when an option is clicked.(e.g Show Month should become Hide Month on click.)
I also want to change all the options back to Hide when I click the Show All option.
When I used
findoption.replace('Hide','Show'); I got this Uncaught TypeError: undefined is not a function error. Can anyone show me how to do that? Any help would be appreciated.
JS Code:
$(document).ready(function(){
$(".showhidelist").change(function() {
$this = $(this);
var findoption = $this.find('option:selected');
var selected = findoption.data('hide');
var show_hide_li = $("."+selected);
if (show_hide_li.css("display") == "none") {
show_hide_li.show();
/* Want to Replace the text Hide with Show */
}
else if (show_hide_li.is(':visible')){
show_hide_li.hide();
/* Want to Replace the text Show with Hide */
}
else if (selected == "Reset") {
$('li').show();
/* Want to Replace the text Show with Hide if it's true */
}
});
});
HTML
<select class="showhidelist">
<option data-hide="Reset">Show All</option>
<option data-hide="year">Hide Year</option>
<option data-hide="month">Hide Month</option>
<option data-hide="day">Hide Day</option>
</select>
<ul id="list">
<li class="year">2004</li>
<li class="month">Feb</li>
<li class="day">17</li>
<ul>

findoption is returns a jquery array, so you would need to access the first element there. I think the following will achieve what you're looking for (as far as the selected element goes).
findoption[0].innerHTML = findoption[0].innerHTML.replace('Show','Hide');
I'm not sure what you're really doing - this gets a little quirky, since you have the show/hide all and you'll have to go through the whole list to update them when you do. Also - you aren't getting a selected event when you re-select what's already selected.
UPDATE: this includes how to update all items in the list using each()
jsfiddle: http://jsfiddle.net/hk4wg/15/

You are not getting the text() into the replace, and you could use the function that .text() has to replace the text.
findoption.text(function(_,text){ return text.replace('Hide', 'Show')});
Change the word 'Hide' or 'Show' depend on what you want.
Update:
I read in caspian comment, that you problem now is that you could not re-click an option clicked, try restarting the select to first option like:
$(".showhidelist").prop('selectedIndex',0);

Basic java script to get combobox

I am just starting out with some java script in an asp.net mvc web site.
I current have a form which I am working on.
The first field which the user is prompted with is a combobox / select (in html)
here is the code for it:
<select name="select">
#foreach (var item in Model.networks)
{
<option value="">#Html.DisplayFor(modelItem => item.name)</option>
}
</select>
Now my next field depends on the option which they chose from the combo box.
How can I populate the next field based on the option they chose in the combo box?
So when the user navigates to the page they will ave a combo box populated with all the options. Below that will be empty fields. When the user selects a option in the combo box I want it to then populate the empty fields with the corresponding data from the option which was chosen.
How do I go about doing this?
Please give the newby answer as in the method in which it will be done. I am assuming that I will be using java script for it?

Although I cannot understand your question in detail, I hope I can help you.
HTML
If you have a select element that looks like this:
<select id=dropdown>
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
Plain Javascript solution
Running this code:
var element = document.getElementByID('dropdown');
var current = e.options[e.selectedIndex].value;
Would make current be 2. If what you actually want is test2, then do this:
var e = document.getElementById('dropdown');
var strUser = e.options[e.selectedIndex].text;
Which would make current be test2

Put the onChange="getSelectedValue" attribute of the select element and then use the following javascript.
<script>
function getSelectedValue(sel)
{
txtToFill.Text(sel.options[sel.selectedIndex].text);
}
</SCRIPT>

If I understand your question correctly you want to react to a combo box value changing and display different content in your page.
If that is the case what you need to know is
how to handle the change event in the select (drop down)
populate empty fields
Here's how you can register and handle the change event in the dropdown:
$("select[name='select']").on("change", function(){
$('#input1').val("What you want in the input goes here");
});
Here's a fiddle that demonstrates this.

Displaying hidden text-box on particular option won't work when it is the only option present

I have the following javascript to display a hidden textbox onchange when a certain option is selected. It works fine when multiple options are present. But when the only option is the one that makes the text-box appear, it won't work. I tried onload too for no results.
function showOther(fieldObj, otherFieldID)
{
var fieldValue = fieldObj.options[fieldObj.selectedIndex].value;
var otherFieldObj = document.getElementById(otherFieldID);
otherFieldObj.style.visibility = (fieldValue=='other') ? '' : 'hidden';
return;
}`
Here's the working fiddle http://jsfiddle.net/8bm9R/2/ Look at the first select field

If it has only one option in the list then onchange event doesn't fire . Use onclick instead:
<select name="task" onclick="showOther(this, 'new');">
(JSFiddle please: http://jsfiddle.net/8bm9R/7/).
To prevent this behaviour and be able to use onchange may be it will be good to add some default option to the list , something like "Choose a Job"..

The onchange Event trigges only, if something changed. You could do something like this:
Please choose...
or maybe:
<select name="jobs" onmouseup="showOther(this,'new');">