I am trying to have one of the values in my list selected. I also have a hidden field which I have to match the values in the option of the selection. If it finds one then this has to be selected.
This is the code I have.Hidden field html code.
<input type="hidden" id="supp" name="supp" value="<?php echo $_POST['suppliers'];?>" />
My js:
<script type="text/javascript">
$(document).ready(function() {
var addSelected = $('#supp').val();
$("#suppliers option[value='" + addSelected + "']").attr("selected","selected");
console.log(addSelected);
});
</script>
The code above is not working.
Here's a jsFiddle that shows a better way to do this: http://jsfiddle.net/ATJvv/
You can just call .val on the <select> itself.
try this:
$("#suppliers option").each(function(index, element){
element.selected = element.value === addSelected;
});
Related
How should I get an form input selected value using jQuery
<form:select path="amtAppMonitResltVO.monitStat" id="amtAppMonitResltVO.monitStat" cssClass="state">
<option value="">선택</option>
<form:options name="monit" items="${apps}" itemValue="subCd" itemLabel="subCdNm" />
</form:select>
<img src="<c:url value='/resources/img/read.png'/>" class="read" id="appStatSearch"></td>
You just need get the .val() of the amtAppCollInfoVO_mkType select input:
var some_var = $('#amtAppCollInfoVO_mkType').val();
For pure Javascript just switch .val() to .value
Note that your current option does not have a value.
Note that since you have the . in your id you have to add double \ to your Javascript code:
<script>
$(function() {
$('#amtAppMonitResltVO\\.monitStat').on('click', function() {
var moniStat = $('#amtAppMonitResltVO\\.monitStat').val();
console.log(moniStat);
})
})
</script>
Credit goes here for this answer.
The one option you have has no value, but if you set a value for it, you could use a selector like the following to get the value of the first selected option.
$("#amtAppCollInfoVO_mkType option:selected").val()
If you wanted all the option values in an array you could use the map method.
var arr = $("#amtAppCollInfoVO_mkType option").map(function(){return $(this).val();}).get();
Just wondering if someone can help me on a problem, I don't fully undersand why it doesn't work.
I have this fiddle, http://jsfiddle.net/uomt99zp/
What it is doing:
When you select from the drop down box, insert that word into the textarea.
Which it DOES, when the textarea isn't "touched".
If you type something into the box, and then try to select an item, it doesn't work.
I'm not sure why this doesn't update the textarea. Perhaps someone can shed some light on this issue?
<textarea name="template" required="required" class="template form-control" rows="6"></textarea>
<select class="templatesAvailableFields">
<option>Select One</option>
<option>Test1</option>
<option>Test2</option>
<option>Test3</option>
</select>
$('.templatesAvailableFields').on('change', function() {
var text = $('.templatesAvailableFields option:selected').text();
$('.template').append(text);
});
You need to set value using .val():
$('.template').val($('.template').val()+text);
Working Demo 1
Also .val() can have callback function which can be used for setting a new value:
function
Type: Function( Integer index, String value ) => String
A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.
$('.template').val(function(i,v){ return v+ text});
Working Demo 2
You can try val(function) with old value + new text to append,
$('.templatesAvailableFields').on('change', function() {
var text = $('.templatesAvailableFields option:selected').text();
$('.template').val(function(ind,val){
return val+text;
});
});
Live Demo
To answer to the "why" it does not work, it's because, the contents of a textarea represent its default value. So, when you append an element to the textarea, you change the default value of this textarea.
So it changes the textarea as long as you did not type in. Once you typed in, the default value is no more used, even if you remove all the text of the textarea.
By using .append you are just concatinating your output string if you want only the dropdown element it would be better to use the .text() or .val() method
$('.templatesAvailableFields').on('change', function() {
var text = $('.templatesAvailableFields option:selected').text();
var existing=$('.template').val();
$('.template').val(existing+text);
});
.append(), .html() and .text() methods do not work with form elements, for setting/getting value of a from element .val() method should be used instead:
Your code is working ...i tried it in visual studio .... Only change I had made is I kept the script under the option control... I am not sure about.for me its working fine.
<body >
<textarea name="template" required="required" class="template form-control" rows="6"></textarea>
<select class="templatesAvailableFields">
<option>Select One</option>
<option>Test1</option>
<option>Test2</option>
<option>Test3</option>
</select>
<script type="text/javascript">
$('.templatesAvailableFields').on('change', function () {
var text = $('.templatesAvailableFields option:selected').text();
$('.template').append(text);
});
</script>
</body>
You should control input value's with val() method
// cache element
var $select = $('.templatesAvailableFields');
$select.change( function() {
$('.template').val($select[0].value);
});
just replace append with text
here is the updated fiddle
$('.templatesAvailableFields').on('change', function() {
var text = $('.templatesAvailableFields option:selected').text();
$('.template').text($('.template').text() + text);
// $('.template').val(text); this won't work in IE <= 7
});
http://jsfiddle.net/rrehan/uomt99zp/2/
I am trying to make it so when somebody selects a certain option from my list it will trigger an event. I know you are supposed to use the .change event but that isn't working for me.
Checkout the code below.
Select:
$co1 = array("English", "Math", "Science", "History");
for($c=1;$c<5;$c++){
echo '<select name="c'.$c.'" id="course'.$c.'" class="selectpicker"><option selected="selected" id="course'.$c.'" value="course'.$c.'" name="'.$c.'">Course '.$c.'</option>';
foreach ($co1 as &$cl1){
echo '<option value="'.$cl1.'" name="'.$cl1.'">'.$cl1.'</option>';
}
echo '</select>';
}
jQuery:
<script>
$('#course1').change(function(){
$("#course2 option[value='Math']").each(function() {
$(this).remove();
});
})
</script>
I basically used PHP to make it so there are four different select options with the same options but different values for a grading system. I want to use this script to make it so when you select Math for the first course it will remove it from the list in the other 3 courses.
Any ideas how this would work? I'm up for suggestions on other ways to do this.
Use delegation
$('body').delegate('#course1','change',function(){
$("#course2 option[value='Math']").each(function() {
$(this).remove();
});
})
Try:
$("body").on("change","#course1",function () {
$("#course2").find("option[value='Math']").remove();
});
Fiddle here.
Attribute name and id just for only select tag. Open this link to see standard select option html tag.
If you do that, you have two same id there. <select>, and your first <option>.
try to change your PHP become :
$co1 = array("English", "Math", "Science", "History");
for($c=1;$c<5;$c++){
echo '<select name="c'.$c.'" id="course'.$c.'" class="selectpicker">
<option selected="selected" value="course'.$c.'">Course '.$c.'</option>';
foreach ($co1 as &$cl1){
echo '<option value="'.$cl1.'">'.$cl1.'</option>';
}
echo '</select>';
}
This is the shortest I could come up with:
$('#course1').change(function () {
$('#course2').find('option:gt(0)').remove().end().append($(this).find('option:gt(0)[value!=' + $(this).val() + ']').clone())
})
jsFiddle example
this will hide the option from course2 if same is selected as course1 and show if user selects another one in course1
$('#course1').change(function () {
var val = $(this).val()
if($('#course2').val()==val)
$('#course2').val($('#course2').children('option:first').val())
$("#course2 option").each(function () {
if ($(this).val() == val)
$(this).hide(); //change this line to $(this).remove() to remove permanently
//and remove the else part below
else
$(this).show()
});
})
DEMO
Note that after removing completely you will not be able to show it again hence i will recommend using show and hide on change of course1
I hope I got right what you want to do. Try this fiddle
You could just .hide() the option which matches the current selected and to show the before hidden again just .show() the current :hidden elements?
$('#course1').change(function(){
var sel = $(this).val();
$("#course2 option:hidden").show();
$("#course2 option[value='"+sel+"']").each(function() {
$(this).hide();
});
});
I have a piece of JS that appends the following to a web form on the click of a button. When the div .remove is clicked the closest new-attribute div is removed. It works fine.
<div class="new-attribute">
<h3>New Attribute</h3>
<label for="attributeName3">Name:</label>
<input class"attribute"="" type="text" name="attributeName3">
<label for="attributeType3">Type:</label>
<select id="t" class="attribute" name="attributeType3">
<option value="text" selected="">Text</option>
<option value="checkbox">Checkbox</option>
<option value="select-list">Select Option List</option>
<option value="notes">Notes</option>
</select>
<div class="option"></div>
<div class="remove">Delete</div>
</div>
In the div "option" I have code to add another form field on the selection of "select-list" in the select input. It does not work. I do not know why. No variable names are clashing. I'm away I shouldnt give the select an id because it is recurrent, I just want to get it working before I make it compliant.
Heres the Js that I'm having trouble with:
//select temp
var select="<div class=\"new-option\">"
+ "<h3>new option</h3>"
+ "<label for=\"attributeName"+count+"\">New otion:</label>"
+ "<input class\"attribute\" type=\"text\" name=\"attributeName"+count+"\">"
+ "</div>";
//get value of select
$('#t').change(function() {
var selectVal = $('#t :selected').val();
if (selectVal == "select-list") {
$(this).closest('.option').append(select);
}
});
The code works with $(select).appendTo('.option');
However it appends the code to every instance of the "option" class on the page. I only want it to append to the current or closest one.
Thank you in advance
The problem is because closest() looks up the DOM for the nearest parent element matching the selector, but .option is a sibling of #t. Try using next() instead:
$('#t').change(function() {
if ($(this).val() == "select-list") {
$(this).next('.option').append(select);
}
});
Try this
http://jsfiddle.net/7WC4G/1/
$('#bob').change(function(){
$('#nuform').append('<p>your new form here</p>');
});
Avoid using next, prev as it could fail if you change the order.
Instead try using siblings instead of closest in your code:
$(this).siblings('.option').append(select);
Read more about it here: http://api.jquery.com/siblings/
I want to retrieve the id of my option that I selected. Over here you can see my HTML.
<select name="zaal" id="zaal">
<DIV CONTENTEDITABLE="FALSE" ID="MACONTAINER" MACONSTRAINT="" MAPARAMETER="ZALEN">
<DIV CONTENTEDITABLE="TRUE" ID="MAITEM">
<option value="~#ITEM.ID~" id="ZAALNAME">~ITEM.ID~, ~ITEM.NAME~</option>
</DIV>
</DIV>
</select>
I am doing it like this.
var selectVal = $("#zaal :selected").val();
var id = selectVal.substring(1);
console.log("id is: " + selectVal);
But for some reason it won't work.
Can anybody help?
EDIT
Ok the divs are the problem. But I need those to get my values from my database.So I think I need to find another solution than a select.
$("#zaal option:selected").attr('value'); // will return you ~#ITEM.ID~
To get the id
$("#zaal option:selected").attr('id'); // will return you ZAALNAME
To get id on selection change try this:
$('#zaal').on('change', function() {
// To get id
$('option:selected', this).attr('id');
$('option:selected', this).attr('value'); // return the value of selected option
// To get the select box value
var value = this.value;
});
Maybe try:
$("#zaal option:selected").val();
Also, try moving the divs outside of the select element.
Look at this question:
<div> and <select> tags
You can only put <option> or <optgroup> inside a <select>. If you want to put anything else in there you have to make some kind of list yourself.
Why would you like to put any div inside a select anyway?
If I put the HTML you gave me (with edited strings) inside Google Chome, this is what is made of your code:
<select name="zaal" id="zaal">
<option value="x" id="ZAALNAME">X, Y</option>
</select>
$("#zaal option[value='0']").text()
Try this:
var selectVal = $("#zaal option:selected").val();
var id = selectVal.substring(1);
console.log("id is: " + selectVal);
The html should be
<select name="zaal" id="zaal">
<option value="~#ITEM.ID~" id="ZAALNAME">~ITEM.ID~, ~ITEM.NAME~</option>
</select>
$('#zaal').change(function(){
alert($($(this)+':selected').attr('id'));
});
Fiddle http://jsfiddle.net/cBaZ7/1/
val() will retrieve the value of the selected option. It is not the id
So try this:
$("#zaal option:selected").attr("id")