I have a select box. when select one option another select box is displayed, and when select other option a text box is displayed.
First i selected the first option of the first select box and the text box appears. when i submit it works fine.
But when i select the second option a select box appears with data using jquery and the item of second select box is selected and submitted. but sumbit button is not getting triggered.
This is this jquery code using which i am getting the select data
this is the div inside which i append select tag with data.
I am getting the data to the select box. but while submitting after selecting this particular select options sumission not happening.
Can anyone please help
Related
I am trying to add input fields and one dropdown by click on button,one more thing is if I select dropdown value another sub dropdown should show based on the selected value of first dropdown.
JSFiddle
I was trying to add fields it has done,but remove is not happening and sub dropdown is not happening.
In that case if I select test1 dropdown one more sub dropdown should show below like test11,test12,test13,
if I select test2 dropdown one sub dropdown should show below like test21,test22,test23 like that ..
one important thing is how can insert those data into Mysqli table when we click the submit button.
I did check this link,in that we can do add and remove input fields and insert also done but when I select drop down I am not going get sub drop down.
How we can do that sub drop down .
I have a select dropdown initially when loading a web page. On clicking the dropdown I need to change that to select2 dropdown. However, instead of single click, double click converts the select to select2 dropdown. Can anyone help me where I am going wrong? Here is the code.
$('#select_id').on('click', function(){
$(this).select2().select2('open');
});
Jsfiddle : https://jsfiddle.net/hwsjz56o/5/
Using select2.js I have a dropdown menu that works great except for one thing: On load I cannot click on the first option in the dropdown menu and have it show as the current selection. When clicking on the first option, nothing happens and if the dropdown loses focus, the placeholder fills the box. If any other of the 40 options are selected, that value text is displayed in the dropdown box and I can use that value in my app.
After an option (other than the 1st one) is selected and I click on the first option again, then the first option value is displayed in the box and I can use it without issue. This issue occurs only on load.
JS
$('.selectArea').select2({
placeholder: 'Area #',
allowClear: true,
disabled: false
});
I have filled the dropdown using a local json file:
$.getJSON('areaList.json', function(json) {
for(i = 0; i < json.length; i++){
$('<option>').attr('value', json[i].MGNT_AREA).text(json[i].MGNT_AREA).appendTo('.selectArea');
}
});
HTML
<select class="selectArea" style='width: 120px; font-family: Arial'></select>
My goal is to be able to load the page with the placeholder in the dropdown box, then be able to click the first option and have it fill the box so I can use that value for other parts of the app.
Any help would be greatly appreciated.
You need to trigger the change event after adding new options to an empty drop down.
I was unable to remove the first option as selected, the attribute selected is not even rendered in web inspector. I was forced to remove the first option as selected because my validation was failing on select2.
What I did to solve the issue is:
After populating the options, I added a new option on top of all the other options and added the selected attribute to it. Immediately after that, I've remove it: Code below:
$(".countries").prepend('<option selected class="placeholdered" value="">Select from the list of countries</option>');
$('.countries').select2().trigger('change');
$('.countries option').removeAttr('selected');
Please notice that I've triggered a select2 change before removing the selected. No need for placeholder...
I am using angularjs for my web app.
I have 2 textareas, a add button and a delete button.
In the first text area i have few options for the user to select. If the user selects on one of the options and clicks on the add the button, this selected item should be moved from first textarea to the second text area. And if the user selects an item from the second textarea and clicks on the delete button, then the item should be moved back to the first textarea.
How to uniquely identify and bind the items selected in the textareas?
Any help on this?
I am using jQuery validation for my application.I have a form that having 2 select boxes.The second select box is disabled according to the first select box value. Also these boxes are coming under an add more functionality. So the form may have multiple such boxes. Thus I am added the validation rules using addClassRules. example code is below.
$.validator.addClassRules("classname", { required: true});
The validation working fine. I want to remove the validation for second dropdown when the first dropdown having a specific value. Currently I have the following issue
once the validation works
change the dropdown value
second box disabled.
click on the second dropdown and then click on out side the error message displayed for second dropdwon.
Form will submit when click on submit button.
I have tried with $('form').validate({ignore:":disabled"}); inside first dropdown's onchange function. but it is not working.
I hope will get a solution for this problem.
Thanks in advance