Trying to change the div id="test" to the value from the dropdown option selected using javascript. I have a jsfiddle started. If user selects 2013 then the div id="test" should change to div id="2013" and show the second dropdown of months. The value from the year dropdown will ultimately be used to query the database for the actual months recorded in that year but for now I'm interested in changing the div id and storing the value for later use.
<div class="report_select" id="style_container_div">
<label>Year:</label>
<select size="1" id="year" title="" type="select" name="style">
<option value="">Select Year</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
<div class="clear"></div>
<div id="error-message-style"></div>
</div>
<div id="test" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
<label>Select a Month:</label>
<select>
<option value=""></option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
</div>
<script type="text/javascript">
$("#year").change(function () {
var targID = $(this).val();
$("div.style-sub-1").hide();
$('#' + targID).show();
})
$("div.style-sub-1 select").change ( function () {
$("div.style-sub-2").hide ();
document.getElementById("test").setAttribute("id", targID);
$('#' + targID).show ();
} )
</script>
Note that you use jQuery instead of document.getElementById("id") you can do simply $("#id"), and instead of .setAttribute you can do .attr('attr', 'attrVal').
Because the id of $("#test") will be changed a solution would be to change the id of select parent.
// on change
var $this = $(this);
$this.parent().attr("id", $this.val());
But instead of changing the id, I recommend you to use a data-attr.
<div id="test" data-value="test">...</div>
And then to set it:
$("#test").attr("data-value", $this.val());
targID there is no variable in this method.
$("div.style-sub-1 select").change ( function () {
$("div.style-sub-2").hide ();
document.getElementById("test").setAttribute("id", targID); // error
$('#' + targID).show ();
});
from your code, it seems you're already using using jQuery therefore try it in
$('#test').prop("id","yourId");
I updated your JsFiddle. I changed your Javascript to reflect the following:
$("select#year").on('change', function () {
var targID = $(this).val();
$("div.style-sub-1").hide();
$('#' + targID).show();
})
$("select#year").on('change', function () {
var tarID = $(this).val();
$('#test').attr('id', tarID); // document.getElementById("test").setAttribute("id", targID);
$("div.style-sub-2").hide ();
$('#' + tarID).show ();
} )
However, this will not change the ID of test after it's changed. You'll have to create a function to keep track of this but it shouldn't be too difficult.
If you really want the pure JavaScript option:
document.getElementById("test").id = "2013";
I also noticed that:
$("div.style-sub-1 select").change ( function () {
$("div.style-sub-2").hide ();
document.getElementById("test").setAttribute("id", targID);
$('#' + targID).show ();
} );
Is not going to trigger in your code as it is. Did you mean to change the ID in the other .change() function?
Related
I want to update p_fullname and put data into multiselect dropdownbox using below function:
function update_project_group(pg_id,pg_group_name,p_fullname){
document.getElementById('pg_id').value=pg_id;
document.getElementById('group_name').value=pg_group_name;
document.getElementById('projectmember').value=p_fullname;
var array = p_fullname;
var dataarray=array.split(",");
$("#projectmember").val(dataarray);
$('#projectmember').multiselect( 'settings', { columns: 2});
}
I think the answer could be found here.
Html
<select name='strings' id="strings" multiple style="width:100px;">
<option value="Test">Test</option>
<option value="Prof">Prof</option>
<option value="Live">Live</option>
<option value="Off">Off</option>
<option value="On">On</option>
</select>
javaScript
var values="Test,Prof,Off";
$.each(values.split(","), function(i,e){
$("#strings option[value='" + e + "']").prop("selected", true);
});
And here is a working example: http://jsfiddle.net/McddQ/1/
I have one issue.I want to set value in drop down by onchange event using javascript/Jquery. I am explaining my code below.
<h1>drop down</h1>
<p>
<select id="leaveCode" name="leaveCode" onChange="SetValue();">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
</p>
<p>
<select id="leaveCode1" name="leaveCode">
<option value="">select value</option>
<option value="21">xyz</option>
<option value="21">abc</option>
</select>
</p>
function SetValue(){
var value=document.getElementById('leaveCode').value;
var name=document.getElementById('leaveCode').name;
document.getElementById('leaveCode1').value=value;
document.getElementById('leaveCode1').name=name;
}
Here my requirement is when user will select any value from 1st drop down list it will display also in second dropdown list in disable mode.Please help me.
You can use following statement that will append and make select in leavecode1 dropdown.Use following statements in your js file
jQuery('#leaveCode').change(function(){
//get selected text from #leaveCode list
text = jQuery("#leaveCode option:selected").text();
//get selected value for selected text
value = jQuery("#leaveCode option:selected").val();
//append new in #leavecode1 and make this option as selected option.
jQuery("#leaveCode1").append("<option value=" + value + " selected>" + text + "</option>");
});
You can check this using following link(updated)-http://jsfiddle.net/aecrcvt2/2/
The best way is to Append the new value in your dropdownlist on change the leaveCode dropdownlist
$("#leaveCode").change(function(){
$("#leaveCode1").append("<option value=" + $("#leaveCode").val() + ">" + $("#leaveCode option:selected").text() + "</option>")
});
I believe this is the answer you need:
$("#leaveCode").change(function(){
var selectedOptionValue = $(this).find(":selected").val();
var selectedOptionText = $(this).find(":selected").text();
var newOption = '<option value='+selectedOptionValue+' disabled>'+selectedOptionText+'</option>';
$("#leaveCode1 option").last().after(newOption);
});
JSFIDDLE
function SetValue(obj) {
var $this = $(obj);
var val = $this.val();
var txt = $('option:selected', $this).text();
$('#leaveCode1').append($('<option></option>').val(val).html(txt));
$('#leaveCode1').val(val).prop('disabled', 'disabled');
}
SetValue('#leaveCode');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>drop down</h1>
<p>
<select id="leaveCode" name="leaveCode" onChange="SetValue(this);">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
</p>
<p>
<select id="leaveCode1" name="leaveCode">
<option value="">select value</option>
<option value="21">xyz</option>
<option value="21">abc</option>
</select>
</p>
I'm trying to get the selected text, not value, from my bootstrap drop down, but my .text() statement is returning a string that contains all the values with a '\n' in between.
Here is my rendered html
<select class="form-control" id="SpaceAccommodation" name="YogaSpaceAccommodation">
<option selected="selected" value="0">1-4</option>
<option value="1">5-9</option>
<option value="2">10-15</option>
<option value="3">16-20</option>
<option value="4">20+</option>
</select>
Here is my javascript, but selectedText returns '5-9\n10-15\n16-20\n20+'
I want it to return 5-9 or 10-15, etc..
$('#SpaceAccommodation').change(function () {
var selectedText = $(this).text();
});
You can get the selected value's text with $(this).find("option:selected").text().
$('#SpaceAccommodation').change(function () {
var selectedText = $(this).find("option:selected").text();
$(".test").text(selectedText);
});
<script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<select class="form-control" id="SpaceAccommodation" name="YogaSpaceAccommodation">
<option selected="selected" value="0">1-4</option>
<option value="1">5-9</option>
<option value="2">10-15</option>
<option value="3">16-20</option>
<option value="4">20+</option>
</select>
<div class="test"></div>
Fiddle for you
$(document).ready(function () {
$('.chzn-select').change(function () {
alert( $('.chzn-select option:selected').text());
});
});
<select id="second" class="chzn-select" style="width: 100px">
<option value="1">one</option>
<option value="2">two</option>
</select>
This is based on the css3 psuedo-class :selected. It's very similar to :checked, I couldn't find docs for :selected
In case anyone cares, I've got another solution. I just looked at the arguments from the docs. You can do something like this (Assuming you've set the value tag of the option element.:
$('#type_dropdown')
.on('changed.bs.select',
function(e, clickedIndex, newValue, oldValue) {
alert(e.target.value);
});
});
See https://silviomoreto.github.io/bootstrap-select/options/
I have a little tag
<select name="txtTK" >
<option value="None">---</option>
<option value="Mat">Materials</option>
<option value="Cate">Category</option>
<option value="Cus">Customer</option>
<option value="Work">Work</option>
<Option value="Em">Employee</Option>
</select>
I want when i choose "Customer" option then the tag will show up the
the table of Custom. But the page does not reload.
I have no idea. Actually i tried w3c ajax but it seems not work with me.
Please give me an advice.
Thank in advance.
What your looking for is this change()
Heres an example you can try:
HTML:
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
jQuery:
$(document).ready(function(){
$(".target").change(function(){
alert("The value has been changed.");
});
});
So all we are doing here is checking if the value has changed for the element within the class .target. If the value has changed then it will run the function.
You can use jquery. Try like this.
<select name="select_user_type" id="select_user_type">
<option>Select User</option>
<option value="reg_farmar.php">Farmer</option>
<option value="reg_expart.php">Expert</option>
<option value="reg_supervisor.php">Supervisor</option>
<option value="reg_coordinator.php">Coordinator</option>
<option value="reg_officer.php">Officer</option>
<option value="reg_manager.php">Manager</option>
</select>
<script>
$('#select_user_type').change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
var str = String($(this).val());
$('#div1').load(str);
})
.change();
</script>
I have 3 select boxes and one input.
I need to merge the selected values together and add it to the hidden input box.
For example:
<select name="select-choice-1" id="select-choice-1">
<option value="1-">1</option>
</select>
<select name="select-choice-1" id="select-choice-2">
<option value="5-">5</option>
</select>
<select name="select-choice-1" id="select-choice-3">
<option value="2011">2011</option>
</select>
Finally I want to get:
Is this case the value would be:
1-5-2011
How could I get this functionality togehter please?
JSFiddle Demo:
one way to do it is:
HTML:
<select name="select-choice-1" id="select-choice-1">
<option value="1-">1</option>
<option value="2-">2</option>
<option value="3-">3</option>
</select>
<select name="select-choice-1" id="select-choice-2">
<option value="5-">5</option>
<option value="6-">6</option>
<option value="7-">7</option>
</select>
<select name="select-choice-1" id="select-choice-3">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
<input type='hidden' id='myhidden' value='' />
JavaScript:
<script type='text/javascript'>
$(document).ready(function() {
$('select').each(function() {
$(this).change(function() {
var myele = '';
$.each($('select option:selected'), function() {
myele += $(this).val();
});
$('#myhidden').val(myele);
console.log($('#myhidden').val());
});
});
});
</script>
Modified w/ onchange.
If you want the code to be flexible enough to work with an arbitrary number of <select> elements, you can write something like:
$("#yourInputBoxId").val($("[id^=select-choice-]").map(function() {
return $(this).val();
}).get().join(""));
Here, map() will project into an array the selected values of all the <select> elements whose id attributes begin with select-choice-. The array items are then concatenated into a string, without a separator (since the values already contain one).
$( "#id_of_hidden_input" ).val(
$( "#select-choice-1" ).val() +
$( "#select-choice-2" ).val() +
$( "#select-choice-3" ).val()
);
you get always use php by POST or get
change the names
<select name="select-choice-1" id="select-choice-1">
<option value="1-">1</option>
</select>
<select name="select-choice-2" id="select-choice-2">
<option value="5-">5</option>
</select>
<select name="select-choice-3" id="select-choice-3">
<option value="2011">2011</option>
</select>
$choice1 = $_POST['select-choice-1'];
$choice2 = $_POST['select-choice-2'];
$choice3 = $_POST['select-choice-3'];
echo $choice ."-".$choice2 ."-".$choice3;
You'll want to use the selectedIndex and options properties of the select element. Here is a quick example:
var elm1 = document.getElementById("select-choice-1"),
elm2 = document.getElementById("select-choice-2"),
elm3 = document.getElementById("select-choice-3"),
sel1 = elm1.options[elm1.selectedIndex].value,
sel2 = elm2.options[elm2.selectedIndex].value,
sel3 = elm3.options[elm3.selectedIndex].value;
alert( sel1 + sel2 + sel3);
var $selects = $('#select_box_1,#select_box_2,#select_box_3');
var seperator = '-';
$selects.change(function() {
var val = [];
$selects.each(function() {
val.push($(this).val());
});
$('#hidden_input').val(val.join(seperator));
}).trigger('change');
This allows for any number of selectbox values to be concatinated with a seperator of your choice.
The .trigger('change); causes the bound .change(...) event to fire and concatinate the values on page load (just in case the form ha been submitted and the selectboxes prefilled)