hey guys i am building a form in which i want when a user select an option from the dropdown menus a text to be displayed and calculate the price.
The dropdown menu is:
<select id="recipient" name="recipient" tabindex="6" class="selmenu">
<option value="staff">Site Staff</option>
<option value="editor">Editor-in-Chief</option>
<option value="technical">Tech Department</option>
<option value="pr">Public Relations</option>
<option value="support">General Support</option>
</select>
and the other dropdown menu is:
<select id="recipient" name="recipient" tabindex="6" class="selmenu">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
What i want to do is when the user selects something from the first and the second menu i want a textfield to change dynamically... can anyone point me the way?
only ajax/jquery could do that in combination of php step might be...
onchange of any dropdown make a ajax request to php script.
return the json response from php script
use this response to either manipulate your form or display data on page.
you don't need to use php for this, it can all be done with jquery/javscript
an example using jquery is below (i had to rename your second select as you had re-used an ID):
$('.selmenu').change(function() {
$('#output').text($('#recipient option:selected').text() + ' ' + $('#recipient2 option:selected').text());
})
output is the id of your textbox.
on a select value being changed, output will be filled with the selected value in both select controls
Related
We want to display Dropdown items when click on dropdown. And need to set text of selected item in Textbox, We done with it using onchange event.
But we do not want to display selected text of dropdown in dropdown;s textbox itself.
We are using dropdown reverse triangle option in front of Textbox to perform necessary logic.
Is it possible to hide dropdown selected text?
Since you havent shared any code assuming few thing I have created a fiddle.. kindly check http://jsfiddle.net/TmJCE/848/
all you need to do is after selecting an item from dropdown reset the dropdown
HTML
<select id="name" >
<option value="">select all</option>
<option value="Text 1">Text 1</option>
<option value="Text 2">Text 2</option>
<option value="Text 3">Text 3</option>
</select>
<input type="text" class="txt">
jQuery
$(document).ready(function(){
$('#name').change(function(){
var x=$('#name').val();
console.log(x);
$('.txt').val(x);
$('#name').prop('selectedIndex',0);
});
});
I use a JQuery/Javascript plugin which changes select boxes with:
$('select').multipleSelect();
The select boxes look like:
<select multiple=\"multiple\">\r\n" +
<option selected=\"selected\" value=\"1\">January</option>
<option value=\"2\">December</option>
<option value=\"3\">December2</option>
</select>
The probem is that it changes all select boxes on the site but it should change one select box only.
How to do it?
Just give the select you want to select, a class, and then call the plugin on it
<select class="selectMe" multiple="multiple">
<option selected="selected" value="1">January</option>
<option value="2">December</option>
<option value="3">December2</option>
</select>
And then in jQuery
$('select.selectMe').multipleSelect();
You need not define an actual class in CSS, though you can, if you want. From now on, just add class selectMe to the <select> that you want the plugin to be called upon.
I want to pass the test in the combobox to another page as included in query string using JavaScript
<select name="classn" id="classnId" onchange="populate()" >
<option value="select">--Select--</option>
<option value="1">I Class</option>
<option value="2">II Class</option>
<option value="3">III Class</option>
here is the populate function
function populate(){
$.ajax({url:"getbatchno.jsp?itid="+$('#classnId').val(),success:function(result){
}});}
but using the above Script I am able to pass only the value part of combobox and I need to pass the text also(I Class,II Class,... etc).
to get text of selected option with jQuery you could use that:
$('#classnId option:selected').text();
I have a multiselect dropdown menu where each option has a checkbox and more than one option can be selected at once. I'm using a jQuery multiSelect plugin generate the dropdown.
<select id="types" multiple="multiple" size="5">
<option value="">Show All</option>
#{
<option value="Gains">Gains</option>
<option value="Losses">Losses</option>
<option value="Adjustments">Adjustments</option>
<option value="Future">Future</option>
<option value="Deliveries">Deliveries</option>
<option value="Recoveries">Recoveries</option>
<option value="Full Payout">Full Payout</option>
<option value="Early Payout">Early Payout</option>
<option value="Charge Offs">Charge Offs</option>
<option value="Returns">Returns</option>
<option value="Transfers">Transfers</option>
<option value="Ins. Write-offs">Ins. Write-offs</option>
}
</select>
What I need to be able to do is separate the options into 2 sections. The first 4 in a section and the last 8 in a section. If an option is selected in one section, then any options that are selected in the other section are then unselected. This is already setup in a C# .NET application. I am having to replicate the functionality. I don't have access to the .NET code. At first I thought maybe I could put the different options into separate divs and just check whether an option was selected in each div but I get validation errors when I try to do that. I'm not really sure what else I could try. Any help with this would be great. Thanks.
try using classes, attach a jquery check box click(), check for class if ( $(this).hasClass("checkboxSection1") ) then uncheck all the other ones like so $(".checkboxSection2").prop('checked', false);
so some simple code is
$("myForm :checkbox").click( function(){
$(this).hasClass("checkboxSection1")?
$(".checkboxSection2").prop('checked', false):
$(".checkboxSection1").prop('checked', false);
});
How about giving them a set of classes e.g. 'option1' & 'option2', then you can do a little javascript/jquery to handle the logic of the selection process...
i have two drop down boxes
the first drop down contain the mobile brands
and other contains the mobile models
i want them to work like when in first drop down a brand is selected
the second drop down will show models of that particular brand i want to do it with javascript
the drop down values are static values
how i can do that?
<select name="brand">
<option value="samsung">Samsung</option>
<option value="Nokia">Nokia</option>
</select>
<select name="model">
<option value="Galaxy">Galaxy</option>
<option value="N8">N8</option>
</select>
The Drop down will be like the above ones
Use ajax record on the first celect box change and fill it in the second select box. Jquery ajax will function will send data to a function which will fetch data from database .