I have three options in a dropdown in html.Now on selecting each one of the option in dropdown i want different input types to be created dynamically.
Firstly here are the options in dropdown :
<select name="choicetosearch">
<option value="None" style="display:none;">
---None---
</option>
<option value="searchName">
Notification Sender
</option>
<option value="searchType">
Notification Type
</option>
<option value="searchDate">
Notification Date
</option>
</select>
Now, on selecting Notification Sender I want a textbox to be displayed.
On selecting Notification Type I want that two checkboxes should be shown.
On selecting Notification Date I want two date type input fields to be shown.
How this can be done?Please help.
You really need to learn some javascript since you didn't even provide any attemts to solve this problem.
Anyway, you need to create the fields you want to show/hide depending on the select box in your html markup and hide them via css. Afterwards you have to use an on change js event on your selectbox and check for the selected option. you now can hide/show the boxes you need.
Check this Example
JS:
$('.search-select').on('change', function(){
$('.search-inputs').children().hide();
var classn =$(this).find(":selected").val();
$('.'+classn).show();
})
HTML:
<select class="search-select" name="choicetosearch">
<option value="None">
---None---
</option>
<option value="searchName">
Notification Sender
</option>
<option value="searchType">
Notification Type
</option>
<option value="searchDate">
Notification Date
</option>
</select>
<div class="search-inputs">
<input class="searchName" type="text"></input>
<input class="searchType" type="checkbox"></input>
<input class="searchDate" type="text"></input>
</div>
Please make sure you refactor the classnames and values since I made this quickly.
In onchange event of select create the elements dynamically using
var dynElem = document.createElement('input');
dynElem.type = 'text';
dynElem.value = 'welcome';
then append the dynElem to Div using Javascript or Jquery like appendChild(dynElem) in javascript or append(dynElem) in jquery
Use 'onchange' attribute of 'select' element to track change of elements in dropDown. To add an element, first generate it some thing like this -
var elem = '<b> hey</b>;
Then you can use 'append(elem)' function in jQuery or 'appendChild(elem)' in javascript.
I am not giving you the code so that you can try it, but if it still doesn't work, ping me, and I will share the code.
Here's a demo -
http://jsfiddle.net/RcfNL/2/
Adding to it, you can get the selected value of the drop down using this -
var city_name = $('#city option:selected').text();
Based on the value, you can perform the required action.
Please you can use this code snippet to your code block or test it first then use it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.searchName, .searchType, .searchDate{
display:none;
}
</style>
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
function createElement123(val){
$('.search-inputs').children().hide();
$('.' + val).show();
}
</script>
</head>
<body>
<select class="search-select" name="choicetosearch" onchange="createElement123(this.value)">
<option value="None">---None---</option>
<option value="searchName">Notification Sender</option>
<option value="searchType">Notification Type</option>
<option value="searchDate">Notification Date</option>
</select>
<div class="search-inputs">
<input class="searchName" type="text" />
<input class="searchType" type="checkbox" />
<input class="searchDate" type="date" />
</div>
</body>
</html>
Hope that it will help to solve your problem. #Cheers
Related
Fellow developers,
I've been creating an app for a while and it has been relatively useful. However, there is only one limitation that I haven't found how to fix and yes, I have read multiple similar issues:
jquery select option click handler
click option in select by jquery?
simulating mouse click on select option with jquery
jQuery simulate click event on select option
jQuery click event not working on option element
Including, even other non-StackOverFlow forums and I have read thousands of times that I need to use the change event from jQuery and I knew it since I used it before. This is my code:
HTML:
<select id="selectTimes">
<option disabled="disabled">Select Speech</option>
<option value="0">Question of the Day (30s)</option>
<option value="1">4 to 6 min (Ice-breaker)</option>
<option value="2">5 to 7 min (Project 2-9)</option>
<option value="3">8 to 10 min (Project 10)</option>
<option value="4">1 to 1:30 min (Evaluator's intro)</option>
<option value="5">2 to 3 min (Evaluation)</option>
<option value="6">5 to 6 min (General Evaluator)</option>
<option value="7">1 to 2 min (Table Topics)</option>
<option value="8">10 to 12 min</option>
<option value="9">13 to 15 min</option>
<option value="10">18 to 20 min</option>
<option value="11">Custom</option>
</select>
jQuery:
$("#selectTimes").on("change", function () {
setLocalStorage("selected", $(this).val());
if ($(this).val() === "11")
$("#divCustomTime").modal();
else {
isCustom = false;
setLocalStorage("isCustom", isCustom);
}
});
However, my main challenge is that anyone can select more than once the last option and it's a bit tricky since at this point, they need to choose first another option and one more time the last one, which I'm sure it will unconformable to anyone. You can see the steps in the following images:
First view without option:
Choose the Custom Time:
Smartphone:
Tablet (<10 in):
Table (10+ in) with Select2:
Change times:
Selected option:
Any advice or workaround of how someone can someone choose multiple times the same option without doing click somewhere else? Thanks for your ideas.
P.S.:
I know that the click event only works in Firefox and since this is a mobile app for Android, it won't work.
I tested custom selects like the select2 without any success.
This might help you out.
The options can be given as input options based on you UI. so you can use the input tags itself which on click of the selected option it triggers event as well
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<style>
.box
{
border:1px solid whitesmoke;
padding:10px 0px;
display:block;
}
</style>
</head>
<body>
<div class="box">
<input type="radio" name="selectest" value="name1" checked> Name1 </input>
</div>
<div class="box">
<input type="radio" name="selectest" value="name2"> Name2 </input>
</div>
<div class="box">
<input type="radio" name="selectest" value="name3"> Name3 </input>
</div>
<div class="box">
<input type="radio" name="selectest" value="name4"> Name4 </input>
</div>
</body>
<script>
$("input").click(function(){
alert($(this).val());
});
</script>
</html>
I got stuck with targeting the correct element and I hope you can help me.
So:
I have fields generated by PHP script:
<fieldset>
<div class="row">
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="text" />
</div>
<div class="row">
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="text" />
</div>
</fieldset>
And I need to initialize an auto complete plugin over each of textfield on focus, based on what is selected inside the select in the row, where is the textbox.
Because of templates of project, where I don't have access, I cannot edit the ID or classes of rows (like numbering the rows), so even this is a simplified solution, it is all like what I am working with.
So, once again, what I need to achieve:
$(input).focus(function(){
Ask_what_is_in_select_at_the_same_row()
Store_value_of_Selected_Option_to_Variable()
});
You can use it this way:
$('div.row :text').focus(function(){
// get the value of the select which is the sibling of focussed text input.
var optVal = $(this).siblings('select').find('option:selected').val();
// now you can use it.
});
DEMO
see i have one form which contains select drop downlist and 2 textbox .In one textbox click option i am going to one page which contains contact list. i am appending the value from that page and again i am returning back to my old page.so after this whatever the value i changed in dropdown select list before its get changed to default value as 1.its not remain same as before.below is my code.
this is my html form.
<body onload="main();">
<select id="privacy" onchange="getPri(this)">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<input type="text" value="choose contacts" id="to" onClick="window.location='contact.html';">
</input>
and this is my js
function getPri(sel)
{
var value = sel.value;
if(value=="2")
{
$("#to").show();
}
else
{
$("#to").hide();
}}
where as in contact.html,i am havving contact list, i am appending the one of the contact from that and appending it to the same textbox which is havving id to.
function main()
{
var contact = "";
if ( sessionStorage.getItem("contact") ) {
contact = sessionStorage.getItem("contact");
$("#to").val(postneedcontact);
}
Now the problem is as suppose i m selected value 2 then contact textbox will show.now after clicking on this i am able to append this value and everything is working correctly.the problem is that the value which i get selected now its changed to again 1.which i want it to set it what it was previously selected by me as 2 because if 1 is selected then contact textbox will hide as shown in the code.so any solution for this?
Assuming contact is new page, why dont you try to save select box selection value into some storage ?
Yes we can do this using webstorage like localstorage, i did this using localstorage. When user select any option from dropdown the index is saved in localstorage an in page load retrieved that index and assigned to dropdown.
Please note that this will not run on online editor it needs browser because of localstorage of browser. Please run this in your browser.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script>
var iVal;
window.onload=function(){
iVal=document.getElementById("privacy");
iVal.selectedIndex=localStorage.getItem("PrivacyVal");
};
function getPri(){
localStorage.setItem("PrivacyVal", iVal.selectedIndex);
}
</script>
</head>
<body>
<select id="privacy" onchange="getPri()">
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
</select>
</body>
</html>
I have an issue related to an HTML page. Hoping that someone could help resolve it -
I have an HTML page with a Country select and a Text Box. The value attribute of the Option tag contains the Country codes. When the User selects a country, its respective country code should get populated in the Text Box.
This will happen each time the User changes the country.
All of the data is present in the page itself, and no server calls are made to fetch the data.
Could this be done using the delegate method? Can I also use Ajax in this case?
Any help would be very much appreciated.
Many thanks in advance!!
By using Jquery
Try this
HTML
<select id="c_code">
<option value="IN">India</option>
<option value="US">USA</option>
</select>
<input id="code" type="text">
Script
$('#c_code').on('change',function(){
$('#code').val($(this).val());
});
DEMO
You simply need to bind the logic to the change event of select
Here is the html code
<select id="ddl">
<option value="001">India</option>
<option value="002">USA</option>
</select>
<input type="text" id="txt" />
Here is the jQuery
$('#ddl').change(function(){
$('#txt').val($('#ddl').val());
});
Here is the demo
I'm new to HTML5 and I'm trying to test the <select> with the attribute multiple in forms on Google Chrome. I encounter two problems.
Firstly, the options list changes in an ugly rectangle
Whereas before it was "normal":
My second problem is that, it seems that when i want to get the values of the select (by clicking on the button and in the code using javascript), only one is given...
Here is my code:
<!DOCTYPE html>
<html>
<body>
How do you travel?
<form method="get" id=myForm" onsubmit="done();">
<select name="transport" multiple> <optgroup label="Ecological">
<option value="Feet" selected>By Foot</option>
<option value="Bike">By Bike</option> </optgroup>
<optgroup label="Non-ecological">
<option value="public transports">With public transports</option> <option value="motorbike">By motorbike</option> <option value="car">By car</option>
</optgroup> </select>
<button onclick="bdone();">button</button>
<script>
function bdone(){
var mesOptions=document.getElementsByTagName('select')[0];
alert(mesOptions.value);
}
</script>
</body>
</html>
Thank you for reading me!
The Styling Issue
Just a note: the multiple attribute of the select element is not specifically HTML5.
The styling is going to depend on the CSS styles that are being applied, both the user agent styles (the default browser styles), and the specific CSS on that page. Try putting it in a page by itself (or in a jsFiddle and see if you get the same styling.
The selection issue
The selectedOptions property of the select element you get will contain an array of HTMLOptionElements, all of which have the value property. See below:
jsFiddle
function bdone(){
var selectElem = document.getElementsByTagName('select')[0]
var mesOptions = selectElem.selectedOptions;
for(var a=0;a<mesOptions.length;a++) {
alert(mesOptions[a].value);
}
}