I have 2 'select' in my html code and from first select, i want to choose only one option and from second select i want to choose multiple options. I have written code in jquery to get multiple options from select.
JQuery
$('option').mousedown(function(e) {
e.preventDefault();
$(this).prop('selected', !$(this).prop('selected'));
return false;
});
and this code is working perfect, but the problem is my second select is working fine but in my first select i am not able to choose any option and i just want to get only one option from first select.
HTML
<div class="form-group">
<div class="col-sm-3">
<label style="width: 100%;" class="control-label"
th:text="#{CLONE.MASTERID}"></label>
</div>
<div class="col-sm-9">
<select class="form-control" id="cloneMasterIds">
<option value="">Select Master Device Id</option>
<option th:each="master : ${masterIds}" th:value="${master.value}"
th:utext="${master.value}">Wireframe</option>
</select>
<p class="field-error hidden-true"
id="SerialNumber-Error" th:text="#{ERROR.CLONE.MASTERID}"></p>
</div>
</div>
<!-- Child IDs -->
<div class="form-group">
<div class="col-sm-3">
<label style="width: 100%;" class="control-label"
th:text="#{CLONE.CHILDID}"></label>
</div>
<div class="col-sm-9">
<select class="form-control select-checkbox" id="cloneChildIds"
multiple="multiple">
<option th:each="child : ${childIds}" th:value="${child.value}"
th:utext="${child.value}">Wireframe</option>
</select>
<p class="field-error hidden-true"
id="SerialNumber-Error" th:text="#{ERROR.CLONE.CHILDID}"></p>
</div>
</div>
Select the second select statement by id. Handle the mousedown and mousemove events:
$("#cloneChildIds").mousedown(function(e){
e.preventDefault();
var select = this;
var scroll = select.scrollTop;
e.target.selected = !e.target.selected;
setTimeout(() => select.scrollTop = scroll, 0);
$(select).focus();
}).mousemove(e => e.preventDefault());
Related
I am working on a front end project and have a set of Dropdown list where it can be selected.
My requirement is when I select a specific dropdown name the corresponding value of it has to load in the next text box.
This is the code that I tried.
$('#selseriessetupid').change(function(){
var employeenumber = $(':selected',this).data('lastused');
$('.form-control').val(employeenumber);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3 uiblock">
<div class="form-group uicontrol editControl" data-displaytype="dropdownlist" data-fieldname="seriessetupid" data-templateitemid="8875">
<label class="clsCaption">Employee Number</label>
<select class="form-control" name="seriessetupid" id="selseriessetupid">
<option value="0">Please select Status</option>
<option data-lastused="01" value="126">FIN1</option>
<option data-lastused="01" value="124">FIN</option>
<option data-lastused="01" value="125">CRM</option></select></div>
</div>
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3 uiblock">
<div class="form-group uicontrol editControl" data-displaytype="textbox" data-fieldname="employeenumber" data-templateitemid="8796">
<label class="clsCaption">Employee ID</label>
<input type="text" placeholder="Employee ID" class="form-control " name="employeenumber" id="employeenumber">
</div>
</div>
</div>
You can get the value of Select dropdown (#selseriessetupid) using .val() function of jquery and try setting it in the #employeenumber value.
$(document).ready(function() {$('#selseriessetupid').change(function(){
$('#employeenumber').val($('#selseriessetupid').val());
});
});
You have to use the next() method of Jquery. Try this one
$('#selseriessetupid').change(function(){
var employeenumber = $(':selected',this).data('lastused');
$(this).next('.form-control').val(employeenumber);
});
Note It will not work in all situations cause your are using an ID selector. change it to class to work properly.
I want to hide & un-hide html text box when selecting another select value using JavaScript.
$(document).on('change', '#pf_status', function() {
var val = $(this).val();
console.log(val);
if (val == 2) {
$('#ref-col').hide();
} else {
$('#ref-col').show();
}
});
$(document).ready(function() {
$('#ref-col').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group">
<label>
Pass Fail Status <span class="text-danger">*</span>
</label>
<select class="form-control" name="pf_status">
<option value="1">Pass</option>
<option value="2">Fail</option>
</select>
</div>
</div>
<div class="col-md-3" id="ref_col">
<div class="form-group">
<label>Pass Date</label>
<font style="font-size: 14px; color: #AA0000"></font>
<input type="text" name="pass_date" id="pass_date" class="form-control" value="somedate">
</div>
</div>
I did not get the desired output. I think something going wrong. Can any one help me ?
Spelling the selector the same as the ID
ID not name is used in the script
No need to delegate if not dynamic
Dropdown does not have a "please select" so trigger the change on load of the page
$(function() {
$('#pf_status').on('change',function() {
var val = $(this).val();
$('#ref_col').toggle(val != 2);
}).trigger("change"); // trigger to handle the lack of "Please select"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group">
<label>
Pass Fail Status <span class="text-danger">*</span>
</label>
<select class="form-control" id="pf_status">
<option value="1">Pass</option>
<option value="2">Fail</option>
</select>
</div>
</div>
<div class="col-md-3" id="ref_col">
<div class="form-group">
<label>Pass Date</label>
<font style="font-size: 14px; color: #AA0000"></font>
<input type="text" name="pass_date" id="pass_date" class="form-control" value="somedate">
</div>
</div>
This is an issue with your selector you are selecting the drop-down with a name using a # sign:
and there's also a problem with your selector #ref-col in your JS it should be like this #ref_col
change your name to id="pf_status" in your HTML like this and this will work:
$(document).on('change', '#pf_status', function() {
var val = $(this).val();
$('#ref_col').toggle(val!=2)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group">
<label>
Pass Fail Status
<span class="text-danger">*</span>
</label>
<select class="form-control" id="pf_status">
<option value="1">Pass</option>
<option value="2">Fail</option>
</select>
</div>
</div>
<div class="col-md-3" id="ref_col">
<div class="form-group">
<label>Pass Date</label>
<font style="font-size: 14px; color: #AA0000"></font>
<input type="text" name="pass_date" id="pass_date" class="form-control" value="somedate">
</div>
</div>
You should always try to figure out why the code it is not working.
Always check your browser console, There you will get errors with line numbers.
This way you will learn to master coding with time.
And don't worry about negative rating for your question.WE are developers to push ourselves to create, develop and design for the betterment of the world.
JQUERY:
$(document).on('change','#pf_status',function(){
// Here you are using this object to refer to something that is not available in DOM.
});
In your HTML, use id attribute for the select element.And this will work fine.
Well that is already shown above.I will show you how to setAttribute in javascript for your code without changing any code in your HTML.So that you learn.
In Javascript:
let ps = document.getElementsByName('pf_status');
ps[0].setAttribute("id","pf_status"); // if you have only 1 select element in your document
There surely are other issues in your code that are all sorted out by other developers.
You are using ID selector in your JQuery and declared as name attribute in your form
<select class="form-control" name="pf_status">
either change it to <select class="form-control" id="pf_status">
or
Use the name selector $(document).on('change', 'select[name="pf_status"]' in JQuery selector.
$(document).on('change', '#pf_status', function() {
var val = $(this).val();
console.log(val);
$('#ref_col').toggle(val!= 2)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group"><label>Pass Fail Status <span
class="text-danger">*</span></label>
<select class="form-control" id="pf_status">
<option value="1">Pass</option>
<option value="2">Fail</option>
</select>
</div>
</div>
<div class="col-md-3" id="ref_col">
<div class="form-group"><label>Pass Date</label>
<font style="font-size: 14px; color: #AA0000"></font>
<input type="text" name="pass_date" id="pass_date" class="form-control" value="somedate">
</div>
</div>
I have a register form. I just need to load bootstrap form in same page behind the select menu when someone click something from select menu. Should I hide form until someone click that item in select menu right?
This is my code.
<div class="form-group">
<select class="form-control menu">
<option>Select category*</option>
<option>Apartment</option>
<option>Lands</option>
</select>
</div>
I need to load this form someone click Apartment in the menu.
<form>
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="Size(sqft)">
/div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="No of bedrooms">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="No of bathrooms">
</div>
</div>
</div>
</div>
</form>
I tried play with this code. But it redirect to another pages.
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>
What method do I need to follow?
Have a look at this jsfiddle:
I gave your wrapper of your apartment an id <div class="col-md-12" id="apartment">.
So I added following jQuery to toggle your html of your apartment:
$('select.menu').change(function(){
// this function runs when a user selects an option from a <select> element
switch($(this).find("option:selected").prop('value')) {
case '1': $('#apartment').show(); break;
default: $('#apartment').hide(); break;
}
});
And don't forget to hide your #apartment:
#apartment {
display: none;
}
window.location.href will redirect you to the new page. You can just hide your form before user make a select change or get it dynamically with jQuery.load() function.
Let's say your HTML,
<div class="form-group">
<select class="form-control menu">
<option>Select category*</option>
<option>Apartment</option>
<option>Lands</option>
</select>
</div>
by default let the form is in display:none.
Jquery,
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
if($(this).val == "Apartment"){
$('form').show();
}else{
$('form').hide();
}
});
</script>
I have tried these solutions: How to set the first option on a select box using jQuery?
These solutions aren't working for me I think because my form is different. I have two radio buttons, and based on which radio button was selected, a dropdown is shown. By default, both dropdowns are hidden (style="display:none"). To show and hide the dropdowns I am the following simple code:
$("#contactRadioButton").click(function () {
$("#contactDropdown").show();
$("#companyDropdown").hide();
});
$("#companyRadioButton").click(function () {
$("#companyDropdown").show();
$("#contactDropdown").hide();
});
One of the code samples I've tried:
$('#contactSelect').change(function(){
$('#companySelect').val('');
});
$('#companySelect').change(function(){
$('#contactSelect').val('');
});
But I need tonly one dropdown to be submitted with a value. Right now, I can click on the contact radio button and then select a value within the dropdown. Then, I can select the company radio button and the other dropdown will be displayed, and I can select a value. Then, both dropdowns will have a value.
PS. I am using bootstrap and bootstrap select. Not sure if that can have anything to do with it.
My full form code (radio buttons and dropdowns):
<div class="form-group">
<label class="control-label">Add contact or company?</label>
<div>
<div class="radio-custom radio-success radio-inline">
<input id="contactRadioButton" name="contact_relatie" type="radio" value="1">
<label for="contactRadioButton">Contact</label>
</div>
<div class="radio-custom radio-success radio-inline">
<input id="companyRadioButton" name="contact_relatie" type="radio" value="1">
<label for="companyRadioButton">Company</label>
</div>
</div>
</div>
<div class="form-group " id="contactDropdown" style="display:none">
<label for="name">Contact:</label>
<select class="form-control" data-plugin="selectpicker" data-live-search="true" id="contactSelect" name="contact_id"><option value="" selected="selected">-- Select Contact --</option> // rest of options..</select>
</div>
<div class="form-group " id="companyDropdown" style="display:none">
<label for="name">Company:</label>
<select class="form-control" data-plugin="selectpicker" data-live-search="true" id="companySelect" name="relation_id"><option value="" selected="selected">-- Select Company --</option> // rest of options..</select>
</div>
JS
$('#contactSelect').change(function(){
$('#companySelect option:first').prop('selected', 'selected');
});
$('#companySelect').change(function(){
$('#contactSelect option:first').prop('selected', 'selected');
});
HTML
<div class="form-group " id="contactDropdown" style="display:none">
<label for="name">Contact:</label>
<select class="form-control" data-plugin="selectpicker" data-live-search="true" id="contactSelect" name="contact_id"><option value="" selected="selected">-- Select Contact --</option> // rest of options..</select>
</div>
<div class="form-group " id="companyDropdown" style="display:none">
<label for="name">Company:</label>
<select class="form-control" data-plugin="selectpicker" data-live-search="true" id="companySelect" name="relation_id"><option value="" selected="selected">-- Select Company --</option> // rest of options..</select>
</div>
Solved it by using this as well, since my code WAS working behind the scenes:
$('#mySelect').selectpicker('render');
https://github.com/silviomoreto/bootstrap-select/issues/84
So for anyone using the bootstrap select, use the above code if you're running into the same issue as me.
What I am trying to achive here is to target a couple of divs to show or hide depanding on what the val is. In this case it doesn't work, when I have only one div target it works, but only for 1 of the to hide not two of them. I am not really sure if I can target multiple divs ?
$(document).ready(function (){
$("#state").change(function() {
// foo is the id of the other select box
if ($(this).val() == "twoChoices") {
$("#foo", "#foo1", "#foo2", "#foo3").show();
}else{
$("#foo", "#foo1", "#foo2", "#foo3").hide();
}
});
<div class="form-group">
<label for="Choice" class="col-sm-8 control-label">How many?</label>
<div class="col-sm-2">
<select id="state" class="form-control">
<option value="oneChoice">1</option>
<option value="twoChoices">2</option>
</select>
</div>
</div>
<div id="foo" class="form-group">
<label for="Choice" class="col-sm-8 control-label">First to be</label>
<div class="col-sm-3">
<select id="mixOrSingle" class="form-control">
<option value="mix">Mix</option>
<option value="single">Single</option>
</select>
</div>
</div>
<div id="foo2" class="form-group">
<label for="Choice" class="col-sm-8 control-label">Second to be</label>
<div class="col-sm-3">
<select id="mixOrSingle" class="form-control">
<option value="mix">Mix</option>
<option value="single">Single</option>
</select>
</div>
</div>
Its because, the way you have used the multiple-selector is wrong.
Try,
$("#foo,#foo1,#foo2,#foo3").show();
Full code,
$(document).ready(function (){
$("#state").change(function() {
$("#foo,#foo1,#foo2,#foo3").toggle($(this).val() == "twoChoices");
});
});
You might be better using classes too, to keep this cleaner and easier to maintain ?
Say html:
<div id="foo" class="form-group twoChoice"></div>
<div id="foo1" class="form-group twoChoice"></div>
<div id="foo2" class="form-group twoChoice"></div>
and JS
$("#state").change(function() {
$("."+$(this).val()).toggle();
/* or what ever logic */
});
Your current example makes no sense, as, whatever the value, it hides the same elements, but I guess that's just to show the problem. The key would be to target the class rather than all those chained id's.
Update, forgot to say. A nice convention too is to name those classes more verbose, so easier to see what is happening in 12 months time :)
eg
<div id="foo" class="form-group js-hiddenBy_twoChoice"></div>
<div id="foo1" class="form-group js-hiddenBy_twoChoice"></div>
<div id="foo2" class="form-group js-hiddenBy_twoChoice"></div>
JS
$("#state").change(function() {
$(".js-hiddenBy_"+$(this).val()).hide();
});