Develop Reference

How do i get value from Select input using jQuery after DOM has been loaded

I am trying to get a value of a select but it keeps returning undefined. I have looked in a lot of places but can't seem to find the solution. I know it's to do with DOM being loaded before and not seeing my select. The thing is, I do get to a point where it says undefined after I change a value of select.
var getMethod = function(select) {
var method = select;
var d = $(method).val();
return d;
}
$(document).on("change", "#select-main", function() {
$("#container").replaceWith("<div class='containter text-center'><h1>Loading...</h1><i class='fa fa-spinner fa-pulse fa-5x'></i></div><br>");
$("#container-table").remove();
$("#header").remove();
$("#export-button").remove();
var newSelect = getMethod("#select-main");
var newData = getDataToSend(links, newSelect);
mainFunc(newSelect, newData);
});
The above code produces undefined when using .val(), as it does not see that there is a new input, but when I call .on() event on the input, I can do things like alert("HERE!");
Any advice?

If what you want is the value of the text between the options tag you shoud use text(); that is
$(method).text()
val is for the value of the value attribute in the select so
<select id="myselect">
<option value="5">Prof</option>
</select>
$('#myselect').val() is 5
$('#myselect').text() is Prof
I would try this
$(document).on("change", "#select-main", function() {
var valueYouAreLookingFor = $(this.selectedOptions).text();
console.log(valueYouAreLookingFor);
});
http://jsfiddle.net/sudakatux/fLy3hpem/
Hope it helps

How to change an element using a select dropdown menu

I'm trying to change an element through a select drop down menu- however, I'm unable to get it to change dynamically.
<select id="optMapList">
<option>Map 1</option>
<option>Map 2</option>
</select>
<script>
document.getElementById("maptype").innerHTML=optMapList.options[optMapList.selectedIndex].text
</script>

Your code seems to run fine. I think you're missing the fact that you have to listen to a 'change'-event in order to by able to run code on changes. This is done as follows:
var optMapList = document.getElementById('optMapList');
optMapList.onchange = function() {
document.getElementById("maptype").innerHTML = optMapList.options[optMapList.selectedIndex].text;
}
Working example: http://jsfiddle.net/thijs_s/gx9mf1ct/

You can just use the value property of the select list inside an event listener as noted below.
var optMapList = document.getElementById('optMapList');
optMapList.onchange = function() {
document.getElementById("maptype").innerHTML = optMapList.value;}

Jquery input value not showing up correctly

I have something very simple to just get an input value.
The code looks like this:
var $a = $('.custom-amount').val();
$('.custom-amount').on('change', function() {
alert($a)
})
And my input:
<div class='custom-amount'>
<input placeholder='Custom Amount' type='text-area'>
For some reason, my alerts are empty. Does anyone see whats going wrong?

Change your selector to $('.custom-amount input'), and get the value after the change event is fired, e.g.
$('.custom-amount input').on('change', function() {
var a = $(this).val();
alert(a);
});
Right now, you are trying to get the value of a div, which won't work. You need to get the value of the input.
Edit: also, it looks like you are trying to display a textarea. Try replacing this...
<input placeholder='Custom Amount' type='text-area'>
With this...
<textarea placeholder='Custom Amount'></textarea>
This may help:
http://jsfiddle.net/d648wxry/

The issue is very simple, you are getting the value of the div element. Instead you should retrieve the value of the input element so the 'custom-amount' class must be added to the input.
Also you need to execute the val() method inside the event to get the value updated.
var $a = $('.custom-amount');
$('.custom-amount').on('change', function() {
alert($a.val());
});

Cause your div has no value. Change your code to:
var $input = $('.custom-amount input');
$input.on('change', function() {
var $a = $input.val();
alert($a)
})

First of all, you only assign to $a outside of the change function. This would be more clear if you kept your code lined up better (see the edit I made to your post). This is the right way to do it:
$('.custom-amount').on('change', function() {
var $a = $('.custom-amount').val();
alert($a)
});
Second of all, the class custom-amount is assigned to a <div> instead of the <input> element. You have to select the <input> element, not the <div>. Change your markup to:
<div>
<input placeholder='Custom Amount' type='text-area' class='custom-amount'>
</div>

jQuery .prepend() Not Working

and I am trying to prepend an option value from a select. I need the output to start with a capital "K". Here is my jQuery:
$(document).ready(function () {
$(".dialogbox").dialog({
modal: true,
autoOpen: false
});
$(".dropdown").change(function () {
$(".dialogbox").dialog("open");
$(".dialogbox").change("puff");
});
$('select.dropdown').change(function () {
var capacityValue = $('select.dropdown').find(':selected').data('capacity').toUpperCase();
$('.dialogbox').val(capacityValue);
});
});
and here is my fiddle
I've tried
$('.dialogbox').val(capacityValue).prepend( 'K' );
but that didn't seem to work. All the examples I've seen indicate that this should work. Thanks in advance for the help.

There are quite a few problems with your code:
(1) .prepend() is for prepending an element as a child of another element. You are trying to call it on a string. I think you want to use string concatenation:
"K" + $('select.dropdown').find(':selected').data('capacity')
(2) You are missing an = in your html for the dropdown's "name" attribute:
<select class='dropdown' name='dropdown'>
(3) You have two elements with class="dialogbox", so the following opens two dialogs:
$(".dialogbox").dialog("open");
You could either use two different class names, or include the element types in the selectors to distinguish between them: 'div.dialogbox' & 'input.dialogbox'
(4) You are attaching two change event handlers to the dropdown. There's no guarantee on the order they are called. You should combine them into one.
(5) You should use .text() or .html() to insert text into an element, not .val(). Use .val() just for setting the value of an input element.
(6) You can establish the animation effect for the opening of a dialog by including the show option:
show: 'puff'
Or:
show: { effect: 'puff', duration: 1000 }
Try the following:
$(".dropdown").change(function () {
var capacityValue = "K" + $(this).find(':selected').data('capacity').toUpperCase();
$('div.dialogbox').text(capacityValue).dialog("open");
$('input.dialogbox').val(capacityValue);
});
jsfiddle

I saw your fiddle I think you don't undestand what prepend does. capacityValue it's just value of attribute.
.prepend
Description: Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
http://api.jquery.com/prepend/
capacityValue it is not element, it's object string, not more.

.prepend() is to prepend a dom element. In your case just Try to prepend the text like this,
var capacityValue = "K"+ $('select.dropdown').find(':selected').data('capacity');
Updated fiddle

Reduced code to one line and corrected it ! **
$('select.dropdown').change(function () {
$('.dialogbox').val("k"+$(this).val());
});
you can easily achieve it without prepend method
solution is here

I've updated your fiddle, check here.
HTML:
<select class='dropdown' name 'dropdown'>
<option data-selected='opts1' data-capacity='opt1' value='opt1'>Option 1</option>
<option data-selected='opts2' data-capacity='opt2' value='opt2'>Option 2</option>
<option data-selected='opts3' data-capacity='opt3' value='opt3'>Option 3</option>
</select>
<div class='dialogbox' title='Dialogbox'></div>
<input type="text" class="dialogbox" readonly />-->
Javascript:
$(document).ready(function () {
$("div.dialogbox").dialog({
modal: true,
autoOpen: false
});
$("input.dialogbox").change(function () {
$("div.dialogbox").dialog("open");
});
$('select.dropdown').change(function () {
var capacityValue = "k".toUpperCase() + $(this).find(':selected').data('capacity');
$('div.dialogbox').text(capacityValue);
$('input.dialogbox').val(capacityValue);
$('input.dialogbox').change();
});
});

Disabling an option from a selector so it can't be removed

I have a selector that looks like this:
<select id="patientSelect">
<option disabled selected style='display: none;' id="patient0">
Incoming Patients</option>
<option id="patient1"></option>
<option id="patient2"></option>
</select>
Because I kind of wanted a placeholder type text (i.e the first option) for the selector. And with my javascript I wanted it so that if the selected option was patient1 and you clicked a button it would be removed and would go back to showing the disabled 'Incoming Patients' thing. The javascript:
$(".ui-btn").click(function(){
remove();
$('#patientSelect :selected').attr('selected', '0');
$('#patientSelect').change();
});
function remove(){
var x = document.getElementById("patientSelect");
x.remove(x.selectedIndex);
}
Problem is it always removes more than 1 option, so if I got rid of "patient2" and tried to run remove() the list becomes a long blank list. All help is appreciated, please don't be too harsh. :P
Edit
Sorry, basically I want the text 'Incoming Patients' (which is the first option of my selector) to never be removed. No matter how many times 'function remove()' tries to run. It can remove the other options fine, just never the first one.
This may not even be possible, I'm not sure..
If there's another way to get text onto a selector without options that'd be fine too :-)
Maybe something like:
function remove(){
if(option != 1){
var x = document.getElementById("patientSelect");
x.remove(x.selectedIndex);
}
}

Try
var $ps = $('#patientSelect');
$(".ui-btn").click(function () {
var $sel = $ps.find('option:selected')
if ($sel.index() > 0) {
$sel.remove();
$ps.val($ps.find('option:eq(0)').val())
}
});
Demo: Fiddle

You can give this a try.
$(".uibtn").click(function(){
remove();
$('#patientSelect').append("<option disabled selected style='display: none;' id='patient0'>Incoming Patients</option>");
$('#patientSelect').change();
});
function remove(){
var x = document.getElementById("patientSelect");
x.remove(x.selectedIndex);
}
Check this http://jsfiddle.net/7yR5V/