Select only not selected combobox jquery - javascript

code with combobox generate function (working well)
<script>
$('#combos').on('change', '.combo', function() {
var selectedValue = $(this).val();
if (selectedValue !== '' && $(this).find('option').size() > 2) {
var newComboBox = $(this).clone();
var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10);
var newComboBoxIndex = thisComboBoxIndex + 1;
$('.parentCombo' + thisComboBoxIndex).remove();
newComboBox.attr('data-index', newComboBoxIndex);
newComboBox.attr('id', 'combo' + newComboBoxIndex);
newComboBox.addClass('parentCombo' + thisComboBoxIndex);
newComboBox.find('option[value="' + selectedValue + '"]').remove();
$('#combos').append(newComboBox);
}
});</script>
html and php (working well)
<form id="myForm">
<div id="combos"><select id="combo1" class="combo" data-index="1">
<option></option>
<?php
while($r = mysql_fetch_array($result))
{
echo "<option value=\"" .$r['id'] . "\">".$r['field'] ." ------</option>";
}
?>
</select>
</div>
<input type="button" id="button_submit" value="Show">
</form>
This code should select only the non-selected comboboxes. But is not working. I think is only working for the 1st non-selected value that function found.
Please see image
<script>
$('#button_submit').click(function()
{
var combo_box_values = $('#combo1 option:not(:selected)').map(function ()
{
return parseInt(this.value);
}).get();
});
</script>
Question: Is it possible? Where is my code missing?
Cheers
EDIT: source code
<h4>Data Options</h4></center>
<div id="combos"><select id="combo1" class="combo" data-index="1">
<option></option>
<option value="1">uptime ------</option>
<option value="2">score ------</option>
<option value="3">gender ------</option>
<option value="4">age ------</option>
<option value="5">angry ------</option>
<option value="6">happy ------</option>
<option value="7">sad ------</option>
<option value="8">surprised ------</option>
<option value="9">location ------</option></select>
<select id="combo2" class="combo parentCombo1" data-index="2">
<option></option>
<option value="1">uptime ------</option>
<option value="2">score ------</option>
<option value="4">age ------</option>
<option value="5">angry ------</option>
<option value="6">happy ------</option>
<option value="7">sad ------</option>
<option value="8">surprised ------</option>
<option value="9">location ------</option></select>
<select id="combo3" class="combo parentCombo1 parentCombo2" data-index="3">
<option></option>
<option value="1">uptime ------</option>
<option value="4">age ------</option>
<option value="5">angry ------</option>
<option value="6">happy ------</option>
<option value="7">sad ------</option>
<option value="8">surprised ------</option>
<option value="9">location ------</option></select>
<select id="combo4" class="combo parentCombo1 parentCombo2 parentCombo3" data-index="4">
<option></option>
<option value="1">uptime ------</option>
<option value="5">angry ------</option>
<option value="6">happy ------</option>
<option value="7">sad ------</option>
<option value="8">surprised ------</option>
<option value="9">location ------</option></select></div>

I think the leading part of the selector feeding the .map() needs to be #combos and not #combo1 if you want to examine all the not selected options from all the <select> elements. For example,
var combo_box_values = $('#combos option:not(:selected)').map(function() {
return parseInt(this.value);
}).get();
Edit: Based on feedback in the comments and an updated question this might work for you, however I'm sure a nicer solution exists as this just feels clunky.
$('#button_submit').click(function() {
var combo_box_values = $('#combos .combo').filter(function() {
return this.selectedIndex === 0;
}).map(function () {
return $('option:not(:selected)', this).map(function() {
return parseInt(this.value);
}).get();
}).get();
console.log(combo_box_values);
return false;
});
I think the key part to understand is the .filter() which excludes the <select>s that the user has chosen an option for, leaving only those that have not been chosen. From there, it is a case of finding all the options that are not selected and extracting the value attribute.
If you want the selected options you could use $('option', this) instead of $('option:not(:selected)', this) in the code above.
In the demo this should show 2,3,4,5,6,7,8,9 if uptime is selected in the first <select> and 1,2,3,4,5,6,7 if surprised is chosen in the first and location in the second.
Hope this helps!

Related

How can I add alert button to the radio option if I have multiple select tags with same option?

Note: Multiple select tags were added using for loop in PHP.The problem I am facing is when I have multiple select tags with same options I could not know which select is calling selectfun()
<?php
$dynamicTable= "";
for ($x = 1; $x <= $a; $x++) {
$dynamicTable .= "<tr><td>";
$dynamicTable .= $x;
$dynamicTable .= "</td><td><input type='text'></td>
<td><input type='text'></td>
<td>
<select name='choose' class='choose' onclick='selectfun()'>
<select name='choose' class='choose' onclick='selectfun()'>
<option value='text'>VAR CHAR</option>
<option value='number'>NUMBER</option>
<option value='radio'>RADIO</option>
</select>
?>
}
echo $dynamicTable;
<script>
function selectfun() {
var selectBox = document.querySelectorAll(".choose")[?];
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
if (selectedValue == 'radio') {
alert("Hi");
}
}
</script>
function selectfun(elem){
if(elem.value == 'radio'){
alert(elem.value);
}
else{
alert('it is not radio')
}
}
<select name='choose' class='choose' onclick='selectfun(this)'>
<option value='text'>VAR CHAR</option>
<option value='number'>NUMBER</option>
<option value='radio'>RADIO</option>
</select>
<select name='choose' class='choose' onclick='selectfun(this)'>
<option value='text'>VAR CHAR</option>
<option value='number'>NUMBER</option>
<option value='radio'>RADIO</option>
</select>
you can use pass parameter from the click event, here you can read more about how to pass the parameter from the functions in JS.
Add an event value to the onchange event
(I assume you want the selected value not that the select has been clicked)
<select id='select1' name='choose' class='choose' onchange=selectfun(event);>
<option value='text'>VAR CHAR</option>
<option value='number'>NUMBER</option>
<option value='radio'>RADIO</option>
</select>
<select id='select2' name='choose' class='choose' onchange=selectfun(event);>
<option value='text'>VAR CHAR</option>
<option value='number'>NUMBER</option>
<option value='radio'>RADIO</option>
</select>
<select id='select3' name='choose' class='choose' onchange=selectfun(event);>
<option value='text'>VAR CHAR</option>
<option value='number'>NUMBER</option>
<option value='radio'>RADIO</option>
</select>
Get selection info using the event
function selectfun(event){
alert(event.target.id + " Selected " + event.target.value);
}
I added an ID to each select in this example so you can see from the output that it is the value from that specific select.
Issue
Only issue with this is if VAR CHAR is selected no change will occur so the function won't be fired.
Solution
I suggest adding an option that is an unset position that asked for a selection.
<select id='select1' name='choose' class='choose' onchange=selectfun(event);>
<option value=''>SELECT VALUE</option>
<option value='text'>VAR CHAR</option>
<option value='number'>NUMBER</option>
<option value='radio'>RADIO</option>
</select>

Reload select when choose select

I have 2 field select.
I want when a value is choose in the first one, the second select will reload and show some values that correspond to the first select.
Example :
States and city :
<select id="billing_state" data-placeholder="State / County">
<option value="">Select an option…</option>
<option value="CA" selected="selected">California</option>
<option value="TX">Texas</option>
</select>
When you choose California reload field select city.
<select id="billing_city" data-placeholder="City">
<option value="">Select an option…</option>
<option value="LA">Los Angeles</option>
<option value="SD">San Diego</option>
...
</select>
And when you choose Texas reload field select city.
<select id="billing_city" data-placeholder="City">
<option value="">Select an option…</option>
<option value="">Dallas</option>
<option value="HT">Houston</option>
...
</select>
I have tried to find some way. But not very effective. Maybe I have no knowledge about it. Can you help and give me an example on jsfiddle?
Thanks very much!
P/s: Oh .I came across it. It is currently visible and hidden when selected. I watched a similar post but was not feasible for my problem. I use wordpress. And the data fields are already available, I just want to reload it to show it. I choose new states but it does not reload the city. I refreshed the web page and it reloaded and displayed a new city field.
You can do something like this:
$('#billing_state').change(function() {
var countrycode = $(this).val();
if (countrycode != "") {
$('#billing_city option').hide();
$('#billing_city option:eq(0)').show();
$('#billing_city option[data-parent=' + countrycode + ']').show();
$('#billing_city').val("")
}
});
Note: I've added data-parent="CA" you the "City" options. Like:
<option data-parent="CA" value="LA">Los Angeles</option>
<option data-parent="CA" value="SD">San Diego</option>
<option data-parent="TX" value="DA">Dallas</option>
<option data-parent="TX" value="HT">Houston</option>
Demo
$('#billing_state').change(function() {
var countrycode = $(this).val();
if (countrycode != "") {
$('#billing_city option').hide();
$('#billing_city option:eq(0)').show();
$('#billing_city option[data-parent=' + countrycode + ']').show();
$('#billing_city').val("")
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="billing_state" data-placeholder="State / County">
<option value="">Select an option…</option>
<option value="CA">California</option>
<option value="TX">Texas</option>
</select>
<select id="billing_city" data-placeholder="City">
<option value="">Select an option…</option>
<option data-parent="CA" value="LA">Los Angeles</option>
<option data-parent="CA" value="SD">San Diego</option>
<option data-parent="TX" value="DA">Dallas</option>
<option data-parent="TX" value="HT">Houston</option>
</select>
Please find link below:
https://jsfiddle.net/ulric_469/8Lk5w0xn/11/
<select id="billing_state" data-placeholder="State / County">
<option value="">Select an option…</option>
<option value="CA" selected="selected">California</option>
<option value="TX">Texas</option>
</select>
<div>
<select id="second_dropdown" data-placeholder="Please Select">
<option value="">Select an option…</option>
<option value="LA">Los Angeles</option>
<option value="SD">San Diego</option>
</select>
</div>
$("#billing_state").on("change", function(e) {
var currentVal = $(this).val();
if (currentVal === "CA") {
var optn = '<option value="">Select an option…</option><option value="LA">Los Angeles</option><option value="SD">San Diego</option>';
} else if (currentVal === "TX") {
var optn = '<option value="">Select an option…</option><option value="">Dallas</option><option value="HT">Houston</option>';
} else {
var optn = '<option value="">Select an option…</option>'
}
$("#second_dropdown option").remove();
$("#second_dropdown").append(optn);
})

Car Make/Model dynamic dropdown

I'm setting up a new form on my site, and I'm using some code I found here (Vehicle drop down selector). However, I'm using this code within a form, and once the form is submitted, the values for make/model aren't changed to their respective names, instead showing their form values. Being a complete JS noob, how would I go about changing the values submitted from values to make/model names?
$(document).ready(function() {
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$make.on('change', function() {
$model.html($options.filter('[value="' + this.value + '"]'));
$model.trigger('change');
}).trigger('change');
var $model = $('#model'),
$year = $('#year'),
$yearOptions = $year.find('option');
$model.on('change', function() {
$year.html($yearOptions.filter('[value="' + this.value + '"]'));
$year.trigger('change');
}).trigger('change');
var $year = $('#year'),
$identifier = $('#identifier'),
$identifierOptions = $identifier.find('option');
$year.on('change', function() {
var filteredIdetifiers = $identifierOptions.filter('[value="' + this.value + '"]');
debugger
if (!($("#make").val() == 3 && $("#model option:selected").text() == 'Falcon')) {
filteredIdetifiers = filteredIdetifiers.filter(function(i, e) {
return e.value !== '3'
});
}
$identifier.html(filteredIdetifiers);
$identifier.trigger('change');
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Vehicle Brand Selector List -->
<select name="make" id="make">
<option value="0">Make</option>
<option value="1">BMW</option>
<option value="2">Daewoo</option>
<option value="3">Ford</option>
<option value="4">Holden</option>
<option value="5">Honda</option>
<option value="6">Hyundai</option>
<option value="7">Isuzu</option>
<option value="8">Kia</option>
<option value="9">Lexus</option>
<option value="10">Mazda</option>
<option value="11">Mitsubishi</option>
<option value="12">Nissan</option>
<option value="13">Peugeot</option>
<option value="14">Subaru</option>
<option value="15">Suzuki</option>
<option value="16">Toyota</option>
<option value="17">Volkswagen</option>
</select>
<!-- Vehicle Model List -->
<select name="model" id="model">
<option value="0">Model</option>
<option class="318i" value="1">318i</option>
<option class="lanos" value="2">Lanos</option>
<option class="courier" value="3">Courier</option>
<option class="falcon" value="3">Falcon</option>
<option class="festiva" value="3">Festiva</option>
<option class="fiesta" value="3">Fiesta</option>
<option class="focus" value="3">Focus</option>
<option class="laser" value="3">Laser</option>
<option class="ranger" value="3">Ranger</option>
<option class="territory" value="3">Territory</option>
<option class="astra" value="4">Astra</option>
<option class="barina" value="4">Barina</option>
<option class="captiva" value="4">Captiva</option>
<option class="colorado" value="4">Colorado</option>
<option class="commodore" value="4">Commodore</option>
<option class="cruze" value="4">Cruze</option>
<option class="rodeo" value="4">Rodeo</option>
<option class="viva" value="4">Viva</option>
</select>
<!-- Vehicle Year List -->
<select name="year" id="year">
<option value="0">Year</option>
<option value="1">1998</option>
<option value="1">1999</option>
<option value="1">2000</option>
<option value="1">2001</option>
<option value="1">2002</option>
<option value="1">2003</option>
<option value="1">2004</option>
<option value="1">2005</option>
<option value="2">1997</option>
<option value="2">1998</option>
<option value="2">1999</option>
<option value="2">2000</option>
<option value="2">2001</option>
<option value="2">2002</option>
<option value="2">2003</option>
<option value="3">1991-1999</option>
<option value="4">1997-2007</option>
<option value="5">1997-2007</option>
<option value="3">2002</option>
<option value="3">2003</option>
<option value="3">2004</option>
<option value="3">2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
</select>
<!-- Vehicle Identity List -->
<select name="identifier" id="identifier">
<option value="0">Type</option>
<option class="E46" value="1">E46</option>
<option class="1997-2003" value="2">N/A</option>
<option class="1997-2007" value="4">N/A</option>
<option class="1997-2007" value="5">N/A</option>
<option class="5041618" value="3">BA</option>
<option class="1997-2005" value="3">AU</option>
<option class="1997-2005" value="3">AU2</option>
<option class="1997-2005" value="4">N/A</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
</select>
In every <option> tag there is an attribute called value. This value attribute is what is returned at as the value of the dropdown when that option is selected. Seems like in the code you found they are all simply set to numbers. You can set them to be whatever you want though:
<option value="Ford">Ford</option>
<option class="focus" value="Focus">Focus</option>
FIXING DYNAMIC OPTIONS
I see that modifying the values directly affect how the dynamic options are displayed. For example the value attribute of the car model dropdown is used to filter the car make dropdown by only displaying options with the same value. Instead of using the model dropdown's value attributes to compare with make, we can add a new data- attribute called data-make and filter the model dropdown based on that instead. This allows you to freely modify the value attribute in model. The example code below shows this. You would need to modify your JS so model affects year, and year affects identifier in the same way.
$(document).ready(function() {
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$make.on('change', function() {
// We now filter model using the data-make attribute, not value
$model.html($options.filter('[data-make="' + this.value + '"]'));
$model.trigger('change');
}).trigger('change');
$('#carForm').submit(function(e) {
e.preventDefault();
let formData = $(this).serializeArray();
let data = {};
for (let i = 0; i < formData.length; i++) {
data[formData[i].name] = formData[i].value;
}
alert('Make: ' + data.make + '\nModel: ' + data.model);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="carForm">
<select name="make" id="make">
<option value="0">Make</option>
<option value="BMW">BMW</option> <!-- These values are now make names -->
<option value="Daewoo">Daewoo</option>
<option value="Ford">Ford</option>
</select>
<!-- Vehicle Model List -->
<!-- Notice the new "data-make" attributes for each -->
<select name="model" id="model">
<option value="0">Model</option>
<option class="318i" value="318i" data-make="BMW">318i</option>
<option class="lanos" value="Lanos" data-make="Daewoo">Lanos</option>
<option class="courier" value="Courier" data-make="Ford">Courier</option>
<option class="falcon" value="Falcon" data-make="Ford">Falcon</option>
<option class="festiva" value="Festiva" data-make="Ford">Festiva</option>
<option class="fiesta" value="Fiesta" data-make="Ford">Fiesta</option>
<option class="focus" value="Focus" data-make="Ford">Focus</option>
</select>
<button type="submit">Submit</button>
</form>
You can get the selected option text like this.
$('#form').submit(function(e) {
e.preventDefault();
var make = $make.find(':selected').text();
}
But it would be good practice to set the value you expect to return as the option value and use a data attribute or class to handle the filtering logic.

Drop down changes automatically ( vise versa would be best )

I need to change the 3rd field automatically depending on first two field. ( it would be best if I change 3rd field and then first 2 fields changes also )
I need a Jquery solution. Anyone can help me please?
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="carcar">car car</option>
<option val="carphone">car phone</option>
<option val="carboll">car boll</option>
<option val="phonecar">phone car</option>
<option val="phonephone">phone phone</option>
<option val="phonecarboll">phone boll</option>
</select>
Is this what you're looking for?
$(document).ready(function() {
// on change for the 3rd select
$("#ChangeItAutomatically").on("change", function() {
// get the value and split on space
var value = $(this).val().split(" ");
// select the other two selects based on the values
$("#First").val(value[0]);
$("#Second").val(value[1]);
});
// on change for the first two selects
$("#First, #Second").on("change", function() {
// set the value of the 3rd select based on the combination of values of the first two
$("#ChangeItAutomatically").val($("#First").val() + " " + $("#Second").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="car car">car car</option>
<option val="car phone">car phone</option>
<option val="car boll">car boll</option>
<option val="phone car">phone car</option>
<option val="phone phone">phone phone</option>
<option val="phone boll">phone boll</option>
</select>

How to use option from a drop down list many times

i wonder if there's a way to use option from select tag for many drop down list. My html looks like :
<div id="backGround0"></div>
<div id="dropspot0"></div>
<p class="ziua0">LUNI<br/>
<select id="zile0">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="luniAn0">
<option value="Ianuarie">Ianuarie</option>
<option value="Februarie">Februarie</option>
<option value="Martie">Martie</option>
<option value="Aprilie">Aprilie</option>
<option value="Mai">Mai</option>
<option value="Iunie">Iunie</option>
<option value="Iulie">Iulie</option>
<option value="August">August</option>
<option value="Septembrie">Septembrie</option>
<option value="Octombrie">Octombrie</option>
<option value="Noiembrie">Noiembrie</option>
<option value="Decembrie">Decembrie</option>
</select>
</p>
And i want to add exactly the same values from above into these select tags:
<div id="backGround1"></div>
<div id="dropspot1"></div>
<p class="ziua1">MARTI<br/>
<select id="zile1">
</select>
<select id="luniAn1">
</select>
</p>
I have tried like this:
function dropDownLists(){
var zileOptions = $.map($('#zile0 option'), function(e) { return e.value; });
var luniAnOptions = $.map($('#luniAn option'), function(e) { return e.value; });
for(var i = 1; i < 7; i++){
zileToAdd = document.getElementById("zile" + i);
luniToAdd = document.getElementById("luniAn" + i);
zileToAdd.append("<option>" + zileOptions + "</option>");
luniToAdd .append("<option>" + luniAnOptions + "</option>");
}
}
Where i tried to take value of first select tag and add in another. But,i couldnt get option value,name or something else for Months...and neither
zileToAdd.append("<option>" + zileOptions + "</option>");
doesnt work :( That for shall add these two drop down lists 6 more times for select tags like id="zile" + i (for days) and id="luniAn" + i for second drop down list (months).
You can try html() function
$('#zile1').html($('#zile0').html());
$('#luniAn1').html($('#luniAn0').html());
Please check this demo
demo: http://jsfiddle.net/8LcVv/
var zile0 = $('#zile0').html();
$('#zile1').html(zile0);
var luniAn0 = $('#luniAn0').html();
$('#luniAn1').html(luniAn0);
you can also use html-defining javascript-variables:
var options = '<option value="01">01</option>' +
'<option value="02">02</option>' +
'<option value="03">03</option>';
$('#zile1').append(options);
$('#luniAn1').append(options);
something like this should work also.
you can add the select block in one file; And include them where ever needed. This link may help you.
Include same header and footer in multiple html files
The benefit of using this technique is it allows you add same code in different pages.

Categories