We Keep Coding

on change selects not working well

I`m trying to make a simple select which generate the next select box...
but I cant seem to make it work
so, as you can see I'm making divs that have ID and parent, when I'm clicking on the first select the value generate the next select box with the divs and the parent value.
this is the jQuery, but for some reason I cant understand why its not working.
$(document).ready(function() {
var i = 1;
var t = '#ss' + i;
$(t).change(function() {
i++;
t = '#ss' + i;
var pick = $(this).val();
$('#picks div').each(function() {
if ($(this).attr('parent') == pick) {
$('#ss' + i).append('<option value=' + $(this).text() + ' >' + $(this).text() + '</option>');
}
$('#ss' + i).removeAttr('disabled');
})
console.log(t);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='picks'>
<div id='29' parent='26'>Pick1</div>
<div id='30' parent='29'>Pick11</div>
<div id='31' parent='26'>Pick</div>
</div>
<select id="ss1">
<option >First pick</option>
<option value="26">Angri</option>
<option value="27">lands</option>
<option value="28">tree</option>
</select>
<select id="ss2" disabled>
<option >Secound Pick</option>
</select>
<select id="ss3" disabled>
<option>Third Pick</option>
</select>
Here is a jsfiddle jsfiddle

Is this what you were shooting for? https://jsfiddle.net/6c5t8ort/
A couple things,
var t = '#ss' + i;
$(t).change(function() {
This only adds the change event to the first dropdown. If you give jQuery a selector (a class) if will add the event to all the elements though. Also the way you had your i variable set up means it would increment on every change.

The code below only attaches a change listener to the first ss ss1 so the change function is never called when you change ss2.
var i = 1;
var t = '#ss' + i;
$(t).change(function() {
You can fix this by adding a class on each select and using $(".myClass").change(function() {
or you can just attach the listener to all selects $("select").change(function() {
Also the value for the option tag does not include a "parent" number. In this case it would be Pick, Pick1, or Pick11.
$('#ss' + i).append('<option value=' + $(this).text() + ' >' + $(this).text() + '</option>');

How to use multiple [attribute=value] Selector for same element?

I am creating a bilingual form in which I have a select tag with multiple option tags inside. I wanna get that option with class "blah" and with value "1" and then select it as "selected" option.
I selected it based on class and then select based value but the result is null. Here is my code:
$('select').each(function (e, item) {
var selectedEnglish = $(item).children("option[class='English']")
var englishItem = selectedEnglish.find("option:selected").val();
var farsiList = $(item).children("option[class='Farsi']")
var farsiItem = farsiList.find("[value='" + englishItem + "']");
farsiItem.attr('selected', 'selected');
});
Whats more how can I get with one chain of statements?
this selected is populated in jquery:
$("#TitleId").html("");
$("#TitleId")
.html("<option value='' class='Farsi'>عنوان</option><option value='' class='English'>Title</option>");
$.each(titles,
function (key, value) {
$("#TitleId")
.html($("#TitleId").html() +
"<option class='Farsi' value='" +
value.Id +
"'>" +
value.Name +
"</option>"+
"<option class='English' value='" +
value.Id +
"'>" +
value.EnName +
"</option>");
});

If you want to get the option with class "blah" and value "1", this is your query:
$('select option[class=blah][value="1"]')
If you want to select that option you can simply do:
$('select option[class=blah][value="1"]').attr('selected', 'selected');

Trying to delete Select box using jQuery remove() function

I am trying to delete select box using jQuery remove function but it does not work. The select box itself is dynamically generated one. I want to delete the same select box if the user wants to delete the dropdown after adding. My code is:
$("#dltElement").click(function() {
$("#idSelect").remove();
});
My code to add the select boxes:
$(document).ready(function() {
var count = 3;
$("#btnCompare").click(function() {
if (count > 4) {
alert("Only 4 options are allowed");
return false;
}
$("#form-group").append(
"<select name='idSelect" + count + "' id='idSelect" + count + "'>" +
"<option>--Select Product" + counter + "--</option>" +
'<option value="p1">Product 1</option>' +
'<option value="p2">Product 2</option>' +
"</select>" + '<input type="button" value=" - " id="dltElement' + count + '" class="btn-minus pull-left" />'
);
count++;
}); // Script for adding dropdown dynamically
});

#idSelect is not present you have to use #idSelect0 or #idSelect1 ... and so on. Rather than you can lookup the events using event delegation on your #form-group to delete the closest element select closest to your input button or in your case your sibling select. This ~ is a sibling selector and will select the sibling select.
A good idea would be to add a class to your select and use that instead as we have used your class .btn-minus for listening to click events, (in case if you have more than one select all will be selected)
$("form-group").on('click', '.btn-minus' , function() {
$(this).find('~select').remove();
});
Find the sibling select and remove
Edit 2
I have added a snippet using .closest() You can check it out. Closest will try to locate the parent div with class container and remove the select and the minus button
$(document).ready(function() {
$("#form-group").on('click', '.btn-minus' , function() {
$(this).closest('.container').remove();
});
$("#btnCompare").click(function() {
var count = $("#form-group > div.container").length;
if (count >= 4) {
alert("Only 4 options are allowed");
return false;
}
//you need to have data-id="number" for all div.container, add class container and data-id to all the divs having select and button
var label = $("#form-group > div.container").last().data('id')*1+1;
$("#form-group").append(
"<div class=container data-id="+label+"><select name='idSelect" + label + "' id='idSelect" + label + "'>" +
"<option>--Select Product" + label + "--</option>" +
'<option value="p1">Product 1</option>' +
'<option value="p2">Product 2</option>' +
"</select>" + ' <input type="button" value=" - " id="dltElement' + label + '" class="btn-minus pull-left" /></div>'
);
}); // Script for adding dropdown dynamically
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form-group">
<input type=button id=btnCompare value=btnCompare />
<div class="container" data-id="1">
<select id="idSelect1" name="idSelect1">
<option>--Select Product1--</option>
<option value="p1">Product 1</option>
<option value="p2">Product 2</option>
</select>
<input disabled type="button" class="btn-minus pull-left" id="dltElement1" value=" - ">
</div>
<div class="container" data-id="2">
<select id="idSelect2" name="idSelect2">
<option>--Select Product2--</option>
<option value="p1">Product 1</option>
<option value="p2">Product 2</option>
</select>
<input disabled type="button" class="btn-minus pull-left" id="dltElement2" value=" - ">
</div>
</div>
Edit 3:
Please find updated snippet. you need to have data-id="number" for all div.container, add class container and data-id to all the divs having select and button.
It is hard to have what you want since you can delete from the middle as well. You can have an array of deleted objects and update it everytime you delete or add into that. In this code I have added to disbaled input delete for 1 and 2 so that you can add and delete other 2. You can play around the logic.
It counts the number of divs in DOM and then checks if you are trying to add more than the limit, It then picks the last added in DOM and increments the data-id to use it as a label for the next select

Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.
You need to use Event Delegation using .on() delegated-events approach, when generating elements dynamically or manipulation selector (like removing and adding classes).
i.e.
$(document).on('event','selector',callback_function)
Example
As you have defined CSS class, use the to get the select element and perform removal operation.
$("#form-group").on('click', ".btn-minus", function(){
$(this).prev('select').remove();
});
$.fn.prev()
Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

you are assigning the <select> element an id that ends with a number, like this :
<select name='idSelect"+count+"' id='idSelect"+count+"'>
this means you end up with something like this :
<select name="idSelect1" id="idSelect1">
...
</select>
so the selector $("#idSelect") will never hit it unless it includes that number.
The part where you add the button :
'<input type="button" value=" - " id="dltElement' + count + '" class="btn-minus pull-left" />
has that same problem.
An easy way (though arguably not the best way) to achieve what you want is this :
function removeSelect(evt)
{
var selectBox = $(evt.currentTarget).parents(".group").find("select");
//do with select box as you will
}
$(document).ready(function() {
var count = 3;
$("#btnCompare").click(function() {
if (count > 4) {
alert("Only 4 options are allowed");
return false;
}
$("#form-group").append(
"<div class='group'>
"<select name='idSelect" + count + "' id='idSelect" + count + "'>" +
"<option>--Select Product" + counter + "--</option>" +
'<option value="p1">Product 1</option>' +
'<option value="p2">Product 2</option>' +
"</select>" + '<input type="button" value=" - " id="dltElement' + count + '" class="btn-minus pull-left" onclick="removeSelect(event)" /> </div>'
);
count++;
}); // Script for adding dropdown dynamically
});

JQuery creating unwanted option tag in select menu

I am having an issue involving a multiple select menu. The user has the ability to select multiple items from Selectbox A and add them to Selectbox B. I Use jQuery to add the items to an array each time the add button is clicked and populate Selectbox B using a foreach loop in php and for the most part it is working fine.
However the issue is that when the user adds the first item to Selectbox A it adds the item but also an empty option tag which I do not want. Is there anything I can do to resolve this?
This is my HTML code:
<select multiple="multiple" id="active" name="activecontributors[]">
<option value="0"> </option>
</select>
This is my JQuery code:
var drop2html = $("#active").html();
//ADD/REMOVE functionality for the contributors select boxes.
$('#addBtn').click(function (e) {//Adding
e.preventDefault();
$('#compresult option:selected').each(function(){
drop2html += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
})
$("#active").html(drop2html);
});
$('#removeBtn').click(function (e){//Removing
e.preventDefault();
$('#active option:selected').each(function(){
$('#active option:selected').remove();
})
drop2html = $('#active').html();
});
//on submit select all the options in active contributors...
$('#mainform').submit(function(){
$("#active option").attr("selected", "selected");
});
For some reason when the page loads it always shows the option tag. I would like for my select box to show no option tag if possible.

its because of the empty option already present in that menu.
$('#compresult option:selected').each(function(){
drop2html = '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
})
try this for without appending to the string or
var drop2html = '';
store empty value to it.

You can use below code without drop2html variable and get rid of your problem :
$(function(){
//remove empty option from active
$('#active option').remove();
$('#addBtn').click(function (e) {//Adding
e.preventDefault();
$('#compresult option:selected').each(function(){
$('#active').append('<option value="' + $(this).val() + '">' + $(this).text() + '</option>');
})
});
$('#removeBtn').click(function (e){//Removing
e.preventDefault();
$('#active option:selected').each(function(){
$('#active option:selected').remove();
})
});
});

Dynamically adding element to Select and setting the selectindex in JQuery

I've created a dynamic select list box as below
for (var i in c) {
//alert(c[i].IsDefault);
if(c[i].IsDefault==true){
//alert('found default');
$("#AnsType").append("<option value='" + c[i].ID + "'>" + c[i].Code+ "</option>");
temp = c[i].Code;
}
else{
$("#AnsType").append("<option value='" + c[i].ID + "'>" + c[i].Code+ "</option>");
}
}
refreshed it
$('#AnsType').selectmenu('refresh');
I tried all these methods and tried to select teh 2nd element in teh listnone worked for me.
$('#AnsType').val(temp.toString());
$('#AnsType').get(3).selectedIndex = 3;
$('select#AnsType').val('3');
$("#AnsType option[text='3']").attr("selected","selected") ;
$("#mydropdownlist").attr('selectedIndex', 1);
$('#AnsType').val(3);
$("#AnsType").attr('selectedIndex', 2);
$("#AnsType").val(c[parseInt(temp)].Code);
$("select#AnsType option[selected]").removeAttr("selected");
$("select#AnsType option[value='"+temp+"']").attr("selected", "selected");
this is how when my listbox is created
<select id="AnsType" name="AnsType">
<option value="1">Obokad</option>
<option value="3">Egen bokning</option>
</select>
Any help is appreciated and thanks in advance for your help..

If you want some element to be pre-selected when creating the menu, add the selected attribute to the corresponding option element:
if(c[i].IsDefault==true){
$("#AnsType")
.append("<option value='" + c[i].ID + " selected='selected'">" + c[i].Code+ "</option>");
temp = c[i].Code;
}
Note that you have to refresh again the selectmenu after you programmatically change the value of the underlying select element:
$('#AnsType').val('3');
$('#AnsType').selectmenu('refresh');
Documentation
refresh update the custom select
This is used to update the custom select to reflect the native select element's value. If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu. Also, if you pass a true argument you can force the rebuild to happen