I have a part of jsp code like this :
<div>
<label>Choose the type of procedure you want :</label><select id="proc-type">
<option value="with-param">With parameters</option>
<option value="without-param">Without parameters</option>
</select>
</div>
Now, if user chooses with parameters, the following div should be displayed :
<div class="drop" id="drop">
<label> Select Procedure (without parameters) : </label> <select id="combobox" name="combobox">
<option>proc 1</option>
<option>proc 2</option>
</select>
And, if its without parameters, this should be displayed
<div class="drop" id="drop">
<label> Select Procedure (without parameters) : </label> <select id="combobox" name="combobox">
<option>proc 3</option>
<option>proc 4</option>
</select>
<label>Parameter : </label> <textarea rows=1 cols=30 ></textarea> <br>
<label>Parameter : </label> <textarea rows=1 cols=30 ></textarea> <br>
</div>
I've tried the jquery code as :
$(document).ready(function () {
$(".dropdown").hide();
$(".drop").hide();
$("#proc-type").change( function(){
var opt="";
opt= $parseInt($("select option: selected").val());
if(opt == "with-param"){
("#dropdown").show(700);
}
else {
("#drop").show(700);
}
});
});
But it doesn't seem to work.Can anyone suggest me how to do it ?
The standard javascript function is parseInt, not $parseInt. And, from what I understand, you don't need it - val() already returns the string value.
Also, to get the value from a <select>, you can call val() on it directly. So, your line becomes:
opt = $(this).val();
Since the this becomes the element on which the event happened - the select itself.
At last, you might want to hide() the other div after showing the correct one, in case the user changes its mind.
well, first of all, ID should always be unique (that is why it is called id) .
so make sure you have unique id for all elements.
secondly, i cannot find any elements with id as dropdown in your code ( are you missing that?)
anyways ,
the solution,
HTML
<div class="drop" id="drop1"> //<---here
<label> Select Procedure (without parameters) : </label>
<select id="combobox1" name="combobox">
<option>proc 1</option>
<option>proc 2</option>
</select>
</div>
<div class="drop" id="drop2"> //<---here
<label> Select Procedure (without parameters) : </label>
<select id="combobox2" name="combobox">
<option>proc 3</option>
<option>proc 4</option>
</select>
<label>Parameter : </label> <textarea rows=1 cols=30 ></textarea> <br>
<label>Parameter : </label> <textarea rows=1 cols=30 ></textarea> <br>
</div>
jquery
$(document).ready(function () {
$(".drop").hide();
$("#proc-type").change( function(){
if(this.value == "with-param"){
$("#drop1").show(700);
$("#drop2").hide();
}
else {
$("#drop2").show(700);
$("#drop1").hide();
}
});
});
You cannot have same ids for multiple element instances that way, id should be unique per element in a single page. i suggest you to change like this:
<div class='wrapperdiv'>
<div class="drop with-param">
<label> Select Procedure (with parameters) : </label>
<select id="combobox1" name="combobox1">
<option>proc 1</option>
<option>proc 2</option>
</select>
</div>
<div class="drop without-param">
<label> Select Procedure (without parameters) : </label>
<select id="combobox1" name="combobox1">
<option>proc 1</option>
<option>proc 2</option>
</select>
</div>
</div>
in css hide the divs:
.drop{ display:none; }
so your jquery should be like this:
$('#proc-type').on('change', function(){
var div2show = this.value;
if(div2show == 'with-param'){
$('.with-param').show();
$('.without-param').hide();
}else{
$('.with-param').hide();
$('.without-param').show();
}
}).change();
or this (If your both div are contained in some wrapper div):
$('#proc-type').on('change', function(){
var div2show = this.value;
$('.'+div2show).show().siblings('div').hide();
}).change();
Fiddle
Related
by selecting the option it has to return the html tags
<select onchange="getval(this);">
<option value="none" selected>none</option>
<option value="1">Blood Group</option>
<option value="2">Donor name</option>
</select>
<script>
function getval(sel)
{
if (sel == 1) {
return '<label for="Bloodgroup">Blood Group</label>
<select name="bg" class="form-control" id="exampleFormControlSelect1">
<option value="O+" selected>O+</option>
<option value="O-">O-</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
</select>';
}else if (sel == 2) {
return ' <label for="name">Name</label>
<input type="text" name = "name" class="form-control" required>';
}
}
</script>
I want an output by choosing the options
for example: if the option is selected as bloodgroup
else if it is donor name
There's a couple of issues in your code. Firstly the argument you're passing to the getval() function is the select element reference, not the value which was selected, so the if condition needs to read the value property from the argument.
In addition your return statements in the function won't do anything alone, as nothing is done with the values you provide back from the function. To add the HTML in the strings to the DOM you need to call a function or property of a target element to append the content to. In the following example that's done using querySelector and innerHTML respectively:
let content = document.querySelector('#content');
function getval(el) {
if (el.value == 1) {
content.innerHTML = `<label for="Bloodgroup">Blood Group</label>
<select name="bg" class="form-control" id="exampleFormControlSelect1">
<option value="O+" selected>O+</option>
<option value="O-">O-</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
</select>`;
} else if (el.value == 2) {
content.innerHTML = `<label for="name">Name</label>
<input type="text" name = "name" class="form-control" required>`;
}
}
<select onchange="getval(this);">
<option value="none" selected>none</option>
<option value="1">Blood Group</option>
<option value="2">Donor name</option>
</select>
<div id="content"></div>
However it's also worth noting that using inline event handlers in onclick attributes is no longer good practice. In addition, storing HTML within your JS should be avoided. A more modern solution would be to use an unobtrusive event handler and have all the HTML within the DOM when the page loads and simply toggle its visibility.
As you've tagged the question with jQuery, here's an example of how to do that:
let content = $('#content');
$('select').on('change', e => {
$('.toggle').hide().filter(`.${e.target.value}`).show();
});
.toggle { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="none" selected>none</option>
<option value="bloodgroup">Blood Group</option>
<option value="donor">Donor name</option>
</select>
<div id="content">
<div class="toggle bloodgroup">
<label for="Bloodgroup">Blood Group</label>
<select name="bg" class="form-control" id="exampleFormControlSelect1">
<option value="O+" selected>O+</option>
<option value="O-">O-</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
</select>
</div>
<div class="toggle donor">
<label for="name">Name</label>
<input type="text" name = "name" class="form-control" required>
</div>
</div>
I've been messing with the AngularJS's dirpagination library, please refer to link:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
see code demo at:
http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview
I'm wondering, can I change the input box to a select box and get the same function. Eg. I'm filtering some names, but the names can only be chosen from the select box and the content will be filtered according to the input from the select box.
I have tried to achieve this by do the following:
function callFilter(Name) {
document.getElementById("search").value = Name;
}
<span style="float:right;">
<select style="height: 30px;" onchange="callFilter(this.value);">
<option value="All_Names" selected>Names</option>
</select>
<input ng-model="q" id="search" class="form-control" value="" type="hidden">
<input value="10" class="form-control" ng-model="pageSize" type="hidden">
</span>
By doing this, I managed to manipulate the hidden input box, however, the value changed in input box won't take actual action to filer my content.
What should I do? Thanks in advance!
Check code for dropdown, and demo here
<select ng-model="q" class="form-control">
<option value='' Selected>Select</option>
<option value="meal 1">Meal 1</option>
<option value="meal 2">Meal 2</option>
<option value="meal 3">Meal 3</option>
</select>
try this
$scope.getFilter = function() {
var filter = {};
filter[$scope.filter] = $scope.query;
return filter;
};
<select ng-model="filter">
<option value='firstname'>by firstname </option>
<option value='lastname'>by lastname </option>
</select>
<input ng-model='query'>
<ul>
<li ng-repeat='person in persons | filter: getFilter()'> firstname: {{person.firstname}}, lastname: {{person.lastname}}
</ul>
let me know, is this post useful or not ...
In my registration page, I'm gonna use two drop-down select that one of them should be hidden if its Negative and if its positive new drop-down will open to choose ...
In mysql table I've table as diabetes name with enom
enum('negative', 'insulin', 'drug', 'ndm', 'mody', '')
Here's my code:
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
For example: If Diabetes is negative value is negative as default then Diabetes Type is hidden
and
If Diabetes is positive then Diabetes type will be appeared to choose items.
those values like insulin, drug, mdm, mody should be inserted into this:
value="positive"
How can I make it through java script?
I can't add class or div or span. Is it possible just through JavaScript using ??
Thank you so much
Use jquery, it is comparatively easier.
$(document).ready(function(){
$("#diabetestype").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").show();
}else{
$("#diabetestype").hide();
}
});
});
To make this code workable, you need to add value of Positive option also. So instead value="" change it to value="positive".
You can even hide the label also:
$(document).ready(function(){
$("#diabetestype").closest("div").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").closest("div").show();
}else{
$("#diabetestype").closest("div").hide();
}
});
});
<div><label for="diabetes">Diabetes:</label>
<select id="diabet" name="diabet" onchange="checkDiabet();">
<option value="negative">Negative</option>
<option value="positive" id="isDiabet">Positive</option>
</select>
</div>
<div id="type" style="display: hidden;">
<label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
<script>
function checkDiabet() {
var isDiabet = document.getElementById("isDiabet").selected;
if (isDiabet == true) { document.getElementById("type").removeAttribute("style"); }
else { document.getElementById("type").style.display = "none"; }
}
</script>
First, set the first select to fire the function checkDiabet() by the attribute onchange. Then give the option an id, which needs to be checked, so you can access it easily.
Then, set the second select to display: none This could be done in a CSS header or file, or like in this case inline. (div style=""), also add an id to access it easily. (div id="type")
Now comes the function checkDiabete(). It checks if the select is selected (can be true or false (bool)). Is selected => show (div id="type"), if not, hide this div (and all of it's contents)
(if is already hidden, it then overwrites the (style="display: none;") with (style="display: none;))
That's it! :)
Try this:
function SelectDiabetes() {
var d = document.getElementById("diabetes").value;
var dType = document.getElementById("diabetestypebox");
if(d == "negative")
dType.style.display = "none";
else
dType.style.display = "block";
}
SelectDiabetes();
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="SelectDiabetes(this.value);">
<option value="negative">Negative</option>
<option value="positive">Positive</option>
</select>
</div>
<div id="diabetestypebox"><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
Call a js function onchange of select id diabetes
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="toggleTypes()">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" style="display:none" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
Use the following javascript
function toggleTypes(){
var el=document.getElementById('diabetes');
var medElem=document.getElementById('diabetestype');
if(el.value=='positive') {
medElem.style.display='block';
} else {
medElem.style.display='none';
}
}
I am trying to Select one of the options from the drop-down and populate the input field with the correct values.
I want to set the value 1 to ($100) val 2 to ($200)
I will not have access to a database to store the values.
<div class="row">
<div class="form-group">
<select class="form-control" id="costfield" name=
"costfield">
<option value="Select Country"> Select Country</option>
<option value="1"> country 1</option>
<option value="2"> country 2</option>
<option value="1"> country 3</option>
</select>
</div>
</div>
<div class="form-group">
<input type="estimate" class="form-control" id="exampleInputEstimate1" placeholder="Estimate">
</div>
</div>
<script>
$( "#costfield" ).val();
$( "#estimate" ).text( "this" ).show();
</script>
</div>
You can store the values in the HTML5 data- attribute for each <option> element. This approach is useful when there is no direct relationship between the option's value attribute and the dollar value you are assigning it to.
p/s: type="estimate" is not a valid attribute value. Try type="text" (anyway, browsers will parse invalid type into text automagically.
// Listen to change
$('#costfield').change(function() {
$('#exampleInputEstimate1').val($(this).find('option:selected').data('dollar-value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="form-group">
<select class="form-control" id="costfield" name="costfield">
<option value="Select Country">Select Country</option>
<option value="1" data-dollar-value="$100">country 1</option>
<option value="2" data-dollar-value="$200">country 2</option>
<option value="1" data-dollar-value="$100">country 3</option>
</select>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputEstimate1" placeholder="Estimate" />
</div>
$('[name="costfield"]').change(function () {
console.log("test");
var cost = this.value;
var str = "";
switch (cost) {
case "1":
str = "$100";
break;
case "2":
str = "$200";
break;
}
$("#exampleInputEstimate1").val(str);
});
JSFiddle
You could use jQuery to get the value from the Select when it changes and then change the value of the input accordingly. So put this in between the script tags.
$('#costfield').on('change', function() {
var value = $(this).val();
$('#exampleInputEstimate1').val(value);
});
You can either set your option values to be 100 or 200 then on any change in the drop down set the value of your input to the value.
$("#costfield").on("change", function(){
$("#exampleInputEstimate1").val($("#costfield").val());
} );
If you want to keep your option values as they are then you can still use the same as above with a small change. (on the assumption that 1 will be 100, 2 will be 200, 3 will be 300, and so on)
$("#costfield").on("change", function(){
$("#exampleInputEstimate1").val($("#costfield").val() + "00" );
} );
Also you may want to put a new option and set it as blank with no value that way you force the user to select something. Or you can set the input on document load and keep the number of options you have. AKA:
<option value="" ></option>
i have made fiddle and put it below. i have a select option, with 2 options owner and non-owner. then based on what is picked questions are asked. i add you the answer and give back feedback. my trouble is i am trying to use a if statement to say if they are owner or not-owner and i am not sure what i should use to say if select = owner.
<div class="list owner">
Number 1: <input id="box1" type="text" /><br/>
Number 2: <input id="box2" type="text" /><br/>
Number 3: <input id="box3" type="text" /><br/>
</div>
<div class="list not-owner">
Number 4: <input id="box1" type="text" /><br/>
Number 5: <input id="box2" type="text" /><br/>
Number 6: <input id="box3" type="text" /><br/>
</div>
<button id="butt">Go</button>
<div id="output">
http://jsfiddle.net/philyphil/CcVsz/11/embedded/result/
Change your HTML code as
<select class="myOptions">
<option value="" selected>Pick an option</option>
<option value="owner">Owner</option>
<option value="not-owner">Not Owner</option>
</select>
To get value use
$('.myOptions').val();
Using this, frame your if..else.. statement.
Check this JSFiddle.
try this
change your select to this
<select id="typeselect" class="myOptions">
<option data-val="" selected="">Pick an option</option>
<option data-val="owner">Owner</option>
<option data-val="not-owner">Not Owner</option>
</select>
then the javasceipt should be
var e = document.getElementById("typeselect");
var ev = e.options[e.selectedIndex].text;
then
if(ev==='Owner'){
//code goes here
}
else{
//code goes here
}
dont forget to use three equal signs ====
Since you used semantically correct data attributes, to get the value from the selected option with your current html, you would use
var opt = $('.myoptions').find('option:selected').data('val');
and your test would then be
if ( opt == 'owner' ) {
}
I'm fairly sure you can shorten this to
var opt = $('.myoptions option:selected').data('val');
This will look strange to anyone not familiar with html 5 custom data attributes however, so you may consider using the more familiar
<option value="owner">Owner</option>
and testing and using
var opt = $('myoptions').val();
<script>
function f(a)
{
if(a=="owner")
{
do something
}
}
</script>
<select onchange=f(this.value)>
<option >Pick an option</option>
<option >Owner</option>
<option >Not Owner</option>
</select>