I have several dropdowns that are basically identical. I want it so that selecting one of the non-blank values will make the information div after appear and selecting the blank values will make the information div disappear. The information div should start out invisible. Here is the html:
<div class="form-group">
<select class="form-control time_range_dropdown">
<option value=""></option>
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
</select>
</div>
<div class="information" style="display: none;">
Some information goes here
</div>
<div class="form-group">
<select class="form-control time_range_dropdown">
<option value=""></option>
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
</select>
</div>
<div class="information" style="display: none;">
Different information goes here
</div>
<div class="form-group">
<select class="form-control time_range_dropdown">
<option value=""></option>
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
</select>
</div>
<div class="information" style="display: none;">
Even more different information goes here
</div>
Here is the jquery:
$('.time_range_dropdown').change(function(){
alert('dropdown is changing');
$(this).next(".information").show();
});
The alert is working so I know it's not a problem with .change. I can't figure out how to make the information div appear though. The code above is not working. The other problem is that this will cause any change of the dropdown to trigger the information div but I only want it triggered if the value changes from blank to non-blank or vice-versa. How do I do this.
You can use closest() to select the correct parent and then next() to select the respective information.
So, it would be:
$('.time_range_dropdown').change(function(){
var value = $(this).val();
if (value == '')
$(this).closest('.form-group').next(".information").hide();
else
$(this).closest('.form-group').next(".information").show();
});
Hope it helps!
Change:
$(this).next(".ride_information").show();
to:
$(this).parent().next(".information").toggle(this.value.length);
.next() selects the next sibling, however you need to traverse up the DOM (using .parent()) first.
jsFiddle example
Related
I have dropdown like below
<div class="col-md-5 col-sm-6 col-xs-12">
<select name="qtype" id="edit_qtype" class="form-control">
<option value='SINGLE ANSWER'>SINGLE ANSWER</option>
<option value='MULTIPLE CHOICE'>MULTIPLE CHOICE</option>
<option value='MULTIPLE CHOICE WITH IMAGE'>MULTIPLE CHOICE WITH IMAGE</option>
<option value='MULTIPLE CHOICE WITH AUDIO'>MULTIPLE CHOICE WITH AUDIO</option>
<option value='MULTIPLE CHOICE WITH VIDEO'>MULTIPLE CHOICE WITH VIDEO</option>
<option value='TRUE OR FALSE'>TRUE OR FALSE</option>
</select>
</div>
Since This form is used for edit data, I am automatic selecting dropdown using data we have. Now my above three dropdown need file input like audio, video and image. So I Have all three input fields like below
<div class="form-group" id="imagediv" style="display:none;">
<label class="col-md-5 col-sm-3 col-xs-12" for="image">IMAGE</small></label>
<div class="col-md-10 col-md-offset-1 col-sm-6 col-xs-12">
<input type="file" id="edit_image" name="image" class="form-control col-md-7 col-xs-12" aria-required="true" accept=".jpg,.jpeg,.png">
</div>
</div>
and two others. I am keep it hidden using style. Now When Page Loading get completed, I want show file upload section based on dropdown selected, I can not use data change function because its already get selected and We don't need change dropdown value. so I am getting confused how I can make it visible. Let me know if someone can help me for that.
I require
if selected value is MULTIPLE CHOICE WITH IMAGE I want show imagediv
if selected value is MULTIPLE CHOICE WITH AUDIO I want show audiodiv
if selected value is MULTIPLE CHOICE WITH VIDEO I want show videodiv
Thanks!
Thanks!
I m trying to select an option in a list using document.getElementsByTagName('select')[1].value = 'oop1'
if it works but it didn't update the information related to the selection made
<div class="b">
<label class="page-text" for="symbol">Symbol:</label>
<select class="input-combobox" id="symbol">
<option value="oop1">oop1, Description of it</option>
<option value="oop2”>oop2, Description of it</option>
</select>
I would like that once the selection is made, the form updates the information related to the selection. If I choose manually I see the update, If I use this function, it selects the option but didn't update.
You have to use the [0] for getting the first element as there is only one select element. You code was wrong as many tags were incomplete and you were using wrong quotes
var e=document.getElementsByTagName('select')[0];
e.options[e.selectedIndex].textContent = 'updated value'
e.value='oop1';
<div class="b">
<label class="page-text" for="symbol" >
<select class="input-combobox" id="symbol">
<option value="oop1">oop1, Description of it</option>
<option value="oop2">oop2, Description of it</option>
</select>
I am new to coding and I am currently working on an assignment. I basically need to build a very basic webpage in which I can ask questions to users and then suggest a vacation destination using their answers.
I used a select dropdown box with options for the user. I am now on the js part and I cannot figure out how to get their input.
this is my code for one of the boxes:
<div class="container">
<h1>Let's find your ideal vacation getaway!</h1>
<div id="userinput">
<form>
<div class="form-group">
<label for="question1">1.What is your favorite cuisine?</label>
<select class="form-control">
<option></option>
<option>Mexican</option>
<option>Italian</option>
<option>Indian</option>
<option>Caribbean</option>
</select>
My question is, what function do I utilize to get their answers, thus allowing me to use branching to generate results. I am sorry if this is confusing, like I said, I am very new to this.
Thanks in advance!
You have to make some changes in both HTML and JS part. In HTML add value attribute and assign a value to each of the options. Also add an onchange event handler which will be fired on change of options from drop-down.
Assign an id to the select element. Use selectedIndex to get index of selected item
HTML
<select class="form-control" onChange="getSelected()" id="selDesc">
<option value="0"> Select a destination</option>
<option value="1">Mexican</option>
<option value="2">Italian</option>
<option value="3">Indian</option>
<option value="4">Caribbean</option>
</select>
JS
function getSelected(){
var getValue =document.getElementById("selDesc").selectedIndex;
alert(getValue);
}
JSFIDDLE
Make changes in Html Code means give the id on select tag
<div class="container">
<h1>Let's find your ideal vacation getaway!</h1>
<div id="userinput">
<form>
<div class="form-group">
<label for="question1">1.What is your favorite cuisine?</label>
<select class="form-control" id="country">
<option value="0" selected> --Select--</option>
<option value="1">Mexican</option>
<option value="2">Italian</option>
<option value="3">Indian</option>
<option value="4">Caribbean</option>
</select>
</div>
</form>
</div>
</div>
JS use Jquery
$("#country").change(function (e) {
alert($(this).val());
})
So here is my ng-options markup:
<div class="form-group">
<label>Client(s)</label>
<select class="form-control" ng-model="addFirm.firmData.clients" ng-options="clients.instance.id as clients.instance.fName for clients in addFirm.firmData.clients" multiple>
</select>
</div>
Here is the resulting html:
<div class="form-group">
<label>Client(s)</label>
<select class="form-control ng-pristine ng-untouched ng-valid" ng-model="addFirm.firmData.clients" ng-options="clients.instance.id as clients.instance.fName for clients in addFirm.firmData.clients" multiple="" aria-invalid="false">
<option label="Mike" value="string:567f82a9b6daa74f16547564">Mike</option>
<option label="brian" value="string:567f83ac61b2fe4160fb4d4a">brian</option>
<option label="Bill" value="string:567f8df461b2fe4160fb4d4b">Bill</option>
</select>
</div>
Everything looks good but the moment I click on the select menu to pick one, let alone a few, the model is cleared which results in the options being completely wiped out. Any idea what might be happening? I have no rouge click events lying about and the rest of the form, which includes about 15 other standard text fields, functions fine.
The really odd thing is if I do a standard select tag with an ng-repeat, I get none of that hogwash. This works fine:
<select name="clients" id="clients" multiple>
<option ng-repeat="clients in addFirm.firmData.clients" value="{{clients.instance.id}}">{{clients.instance.fName}}</option>
</select>
Any ideas? Thanks in advance!!!
You are binding select to the same model you use to store array items:
<select class="form-control"
ng-model="addFirm.firmData.clients" <!-- <-- addFirm.firmData.clients -->
ng-options="clients.instance.id as clients.instance.fName for clients in addFirm.firmData.clients" multiple>
<!-- and here again --^ -->
</select>
See, addFirm.firmData.clients is both in ngModel and ngOptions? Bind ngModel to something else, for example:
ng-model="addFirm.firmData.clientSelected"
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