We Keep Coding

Remove the duplicate values and combinations in html select option

I have a dynamically generated <select> field with <option>.
<select>
<option value=""></option>
<option value=""></option>
<option value=""> False</option>
<option value=""> True</option>
<option value="">False False</option>
<option value="">False True</option>
<option value="">True</option>
<option value="">True True</option>
</select>
I would like to remove the duplicate occurrences and combinations. The final <select> field with <option> should look like :
<select>
<option value=""></option>
<option value="">False</option>
<option value="">True</option>
</select>
Here is how my fiddle looks like. Been trying to solve this for hours.
var values = [];
$("select").children().each(function() {
if (values.length > 0) {
var notExists = false;
for (var x = 0; x < values.length; x++) {
var _text = this.text.replace(/\s/g, "");
var value = values[x].replace(/\s/g, "");
if (values[x].length > _text.length) {
//console.log('>>+', value, ' || ', _text, value.indexOf(_text))
notExists = value.indexOf(_text) > -1 ? true : false;
} else {
//console.log('>>*', value, ' || ', _text, _text.indexOf(value))
notExists = _text.indexOf(value) > -1 ? true : false;
}
}
if (notExists) {
//this.remove();
values.push(this.text);
}
} else {
values.push(this.text);
}
});
Any help to solve this is appreciated.

You can use map() to return all options text and use split() on white-space. Then to remove duplicates you can use reduce() to return object. Then you can empty select and use Object.keys() to loop each property and append to select.
var opt = $("select option").map(function() {
return $(this).text().split(' ')
}).get();
opt = opt.reduce(function(o, e) {return o[e] = true, o}, {});
$('select').empty();
Object.keys(opt).forEach(function(key) {
$('select').append(' <option value="">'+key+'</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value=""></option>
<option value=""></option>
<option value="">False</option>
<option value="">True</option>
<option value="">False False</option>
<option value="">False True</option>
<option value="">True</option>
<option value="">True True</option>
</select>

You can loop through each of this children text , then use substring to get the first text & put it in an array.
Once done empty the select element and append the newly created options
var _textHolder=[]; // NA empty array to hold unique text
var _options="";
$("select").children().each(function(item,value) {
var _textVal = $(this).text().trim(); // Remove white space
//get the first text content
var _getText = _textVal.substr(0, _textVal.indexOf(" "));
// if this text is not present in array then push it
if(_textHolder.indexOf(_getText) ==-1){
_textHolder.push(_getText)
}
});
// Create new options with items from _textHolder
_textHolder.forEach(function(item){
_options+='<option value="">'+item+'</option>'
})
// Empty current select element and append new options
$('select').empty().append(_options);
JSFIDDLE

I would do with pure JS ES6 style. This is producing a words array from the whitespace separated options element's innerText value regardless the words are in the front, middle or the end; and it will create a unique options list from that. Basically we are concatenating these arrays and getting it unified by utilizing the new Set object. The code is as follows;
var opts = document.querySelector("select").children,
list = Array.prototype.reduce.call(opts, function(s,c){
text = c.innerText.trim().split(" ");
return new Set([...s].concat(text)) // adding multiple elements to a set
},new Set());
list = [...list]; // turn set to array
for (var i = opts.length-1; i >= 0; i--){ //reverse iteration not to effect indices when an element is deleted
i in list ? opts[i].innerText = list[i]
: opts[i].parentNode.removeChild(opts[i]);
}
<select>
<option value=""></option>
<option value=""></option>
<option value=""> False</option>
<option value=""> True</option>
<option value="">False False</option>
<option value="">False True</option>
<option value="">True</option>
<option value="">True True</option>
</select>

Javascript: dropdown, get first element value LIKE?

Given a dropdown with an unknown number of option elements:
<select id="ddlDropDown">
<option value="text1">Some text</option>
<option value="text2">Some text</option>
<option value="text3">Some text</option>
...
<option value="textN">Some text</option>
And given a textbox where I can type in a value:
<input type=text id="txtTextBox" onkeyup="selectDDL();"/>
And given the script function:
function selectDDL(){
var txtElem = document.getElementById("txtTextBox");
var ddlElem = document.getElementById("ddlDropDown");
var typedText = txtElem.value;
//magic happens here
}
How do I, using purely javascript, get select the first option matching LIKE the text in the text box without iterating through the entire collection?
That is to say, assume that I have 500 dropdown option elements with random values between 500 and 1500, how do I get and select the first option (in the list, not in order) that matches what the user has typed so far?
So if their were three items: 1030, 1012, and 1013 in the dropdown and the user types:
1: 1030 is selected.
10: 1030 is still selected
101: 1012 is selected
1013: 1013 is selected
Clarification: without iterating the collection and similar to jquery's ^= operator

You don't need jQuery to use ^=, just use querySelectorAll with the attribute prefix selector:
var texts = document.querySelectorAll("[value^='text']");
console.log(texts);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<select id="ddlDropDown">
<option value="text1">Some text</option>
<option value="text2">Some text</option>
<option value="text3">Some text</option>
<option value="textN">Some text</option>
<option value="notText">123456</option>
</select>

You can use a starts with attribute selector. Only issue with the code is I am not escaping any of the special characters from the selector. So if the user enters in ' it will blow up.
document.querySelector("#x").addEventListener("keyup", function(){
//code to filter out the options
var txt = this.value;
var opts = document.querySelectorAll("#ddlDropDown option[value^='" + txt + "']");
//code to display the options for demo
var out = Array.prototype.slice.call( opts ).map(function (x) {return x.value});
document.querySelector("p").innerHTML = out.join("<br/>");
});
<select id="ddlDropDown">
<option value="text1">Some text</option>
<option value="text2">Some text</option>
<option value="text3">Some text</option>
<option value="text11">Some text</option>
<option value="text21">Some text</option>
<option value="text31">Some text</option>
</select>
<input type="textbox" id="x">
<p></p>

I would use the string#indexOf method to find out if there's a match.
function selectDDL() {
var txtElem = document.getElementById("txtTextBox");
var ddlElem = document.getElementById("ddlDropDown");
var typedText = txtElem.value;
var options = document.querySelectorAll("#ddlDropDown option");
var matches = [];
for (var i = 0; i < 3; i++) {
if (options[i].innerHTML.indexOf(typedText) == 0) {
matches.push(options[i]);
}
}
matches[0].setAttribute("selected", "selected");
}

Those who rely on a selector with [value^=...] will find an option by its value attribute, not by its text.
There is no CSS selector for selecting an option by its text. jQuery supports "has" and "contains", but uses iteration to implement those features.
Just for a fun alternative, but probably not advisable: innerHTML is slow and this will go wrong when the select tag has other tags inside than the options:
var html = ddlElem.innerHTML;
var idx = html.indexOf('>'+typedText);
ddlElem.selectedIndex = idx === -1
? -1
: html.substr(0, idx).match(/\<option/g).length - 1;

Dropdown 1 value automatically selects dropdown 2 value

I am trying to write a JavaScript function where if value 1 from the first dropdown(pcount) automatically selects value 1 for drop down 2(listedname), But then if anything besides value 1 (2,3,4) is chosen I do not want drop down 2 to do anything except default back to please select if value 1 was selected and then changed to another value. I am very new to JavaScript and programming in general and have not been able to find any examples similar to this. So any help will help!
JavaScript Funtion:
<script type="text/javascript">
function leaveChange() {
if (document.getElementById("pcount").value = 1){
document.getElementById("listedname").value = 1;
}else
document.getElementById("listedname").value = 2;
}
}
</script>
Dropdown 1 and 2:
<select id="pcount" onchange="leaveChange()">
<option value="" selected="selected">Please Select</option>
<option value="1">0</option>
<option value="2">1</option>
<option value="3">2</option>
<option value="4">3</option>
</select>
<select id="listedname">
<option value="" selected="selected">Please Select</option>
<option value="1">Business Name</option>
<option value="2">Individual Owner</option>
</select>

If you are doing your if clause with one equals sign, Javascript will check if your element is set to the new value successfully.
Instead, when you do a comparison, use double equal signs (in your case)
if (document.getElementById("pcount").value == 1){

If anyone is looking for the JavaScript function here you go!
<script type="text/javascript">
function leaveChange() {
if (document.getElementById("pcount").value == 1){
document.getElementById("listedname").value = 1;
}
else if (document.getElementById("pcount").value != 1){
document.getElementById("listedname").value = "";
}
}
</script>

Jquery - find the cost based on checking two arrays multiplied by a static number

My first post so I hope I do this right and sorry I am still learning so not sure if I even post this correctly. What I kinda sort of did was pseudo code code what I need but the execution is way off.
So my variables are books, program, and courses.
To find my book cost I need to check to see what group the program falls in (arrays) then multiply it by the number of courses that are being taken.
var programGroup1=["Arts", "Crafts", "Painting"];
var programGroup2=["Zumba", "Ballet", "Jazz"];
var programGroup3=["Math", "Science", "History"];
var books
if(programGroup1){
books = course * 10
}else if(programGroup2){
books = course * 20
}else if(programGroup3){
books = course * 30
}else{
end();
}
<select id="program" name="program" >
<option value="" selected="true">--</option>
<option value="Arts" >Arts</option>
<option value="Crafts" >Crafts</option>
<option value="Painting" >Painting</option>
<option value="Zumba" >Zumba</option>
<option value="Ballet" >Ballet</option>
<option value="Jazz" >Jazz</option>
<option value="Math" >Math</option>
<option value="Science" >Science</option>
<option value="History" >History</option>
</select>
<select id="course" name="course">
<option value="" selected="true">--</option>
<option value="5">5</option>
<option value="4">4</option>
</select>
So then if you took Arts and course 5 your books would be 10 * 5 and it would output $50, or if you took crafts and course 5 it would be 20 * 5 and would output $100.
Thanks for any help I am really trying to learn just need some help.

Something like this:
// If a select changes
$('select').change(function () {
var psel, csel, program, course, total;
// Get the values of both selectors
psel = $('#Program').find('option:selected').val();
csel = $('#course').find('option:selected').val();
// Assign the program var a value depending on the program type
if (psel.indexOf('Arts') > -1) { program = 10; }
if (psel.indexOf('Crafts') > -1) { program = 20; }
// Set the value of course to the value of the selected option
course = csel;
// Add them together
total = program * course;
// And only if they all exists (if both selections have been done), alert the total
if (program && course && total) {
alert('Total ' + total);
}
});
Working demo.

You are best off doing something like this:
For each program, set an action and value, like this: $('option[value="Arts"]').data({ action:'*', value: 10 });
When one of the selects changes, get the value and action, and apply them to the cost.
Sample HTML:
<select id="program" name="program" >
<option value="" selected="true">--</option>
<option value="Arts" >Arts</option>
<option value="Arts2" >Art2s</option>
<option value="Arts3" >Arts3</option>
<option value="Crafts" >Crafts</option>
<option value="Crafts2" >Crafts2</option>
<option value="Crafts3" >Crafts3</option>
</select>
<select id="course" name="course">
<option value="0" selected="true">--</option>
<option value="5">5</option>
<option value="4">4</option>
</select>
Sample JS using jQuery:
$(function() {
$('#program option[value=""]').data({ action:'*', value: 0 });
$('option[value="Arts"]').data({ action:'*', value: 10 });
$('option[value="Arts2"]').data({ action:'*', value: 20 });
$('option[value="Arts3"]').data({ action:'*', value: 30 });
console.log($('option[value=Arts]').data());
$('select').on('change', function() {
var cost = parseFloat($('#course').val());
var program = $('#program').val();
var program_obj = $('#program option[value="'+program+'"');
var action = program_obj.data('action');
var arts_val = parseFloat(program_obj.data('value'));
switch(action) {
case '*':
cost = cost * arts_val;
break;
case '/':
cost = cost / arts_val;
break;
case '+':
cost = cost + arts_val;
break;
case '-':
cost = cost - arts_val;
break;
}
alert(cost);
});
});
Here's a working fiddle

How can I remove options with the same text from a select element?

I have a select element that shows multiple options with the same text:
<select name="tur" id="tur">
<option value="1">a</option>
<option value="2">a</option>
<option value="3">a</option>
<option value="4">a</option>
<option value="5">b</option>
<option value="6">b</option>
<option value="7">c</option>
<option value="8">d</option>
</select>
Using JavaScript, I would like to remove these duplicates so that only one of each is shown:
<select name="tur" id="tur">
<option value="1">a</option>
<option value="5">b</option>
<option value="7">c</option>
<option value="8">d</option>

You can loop through the <option> elements, checking each one to see if its text content is in an array. If it is, remove the <option>. If not, add its content to the array. This will remove options that are redundant in the list.
Try it out: http://jsfiddle.net/FXq8W/
​var array = [];
​$('#tur option').each(function() {
var $th = $(this);
var text = $th.text();
if( $.inArray(text, array) > -1 ) {
$th.remove();
} else {
array.push( text );
}
});​​​​​​​​​​​​​​
http://api.jquery.com/jquery.inarray/

var remove = [], values = {}, value, i;
var options = document.getElementById('tur').getElementsByTagName('option');
for (i=0; i<options.length; i++) {
value = options[i].innerHTML.replace(/^\s*|\s*$/g, '');
if (value in values) remove.push(options[i]);
else values[value] = true;
}
for (i=0; i<remove.length; i++) {
remove[i].parentNode.removeChild(remove[i]);
}