remove duplicate options from HTML select - javascript

This is a weird one but our developer is away and my client is having a web site presentation tomorrow.
On a web page one drop-down has the values below. Is there a way using script/css our designer can hide the replicated values and just show 1-9 once? Thanks so much.
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>

Try this:
var usedNames = {};
$("select > option").each(function () {
if(usedNames[this.text]) {
$(this).remove();
} else {
usedNames[this.text] = this.value;
}});
Working Demo

you can remove the dups using jQuery like below:
var found = [];
$("select option").each(function() {
if($.inArray(this.value, found) != -1) $(this).remove();
found.push(this.value);
});
Keep an array of found values, if value not found in array, add it .push(), if found, its a dupe, .remove() it.

You can use :gt() selector:
$('select option:gt(8)').hide();

try this ....
$('select option').each(function(i)){
if(i >= 9)
$(this).remove();
});

Related

How to select the given option in dropdown

I've a dropdown
<select id="ddl1">
<option value="0">number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
now what i'm doing is as soon as user clicks on ddl1 i change its default value to 4 like this
$(function () {
var defaultValue = "4";
$('#ddl1').click(function () {
var select_val = $('#ddl1').val();
if (select_val == "0")
$('#ddl1').val(defaultValue);
});
});
but now the problem is when user tries to select the default option of dropdown i.e number, option 4 is selected. Any ideas how to fix this?
The problem is when the user just clicks on dropdown -> option4 must be selected and when user clicks on option number -> option number must be selected instead of option 4.
Not sure why you're doing that but focusin or focus events can help you achieve that as follows:
$(function() {
$('#ddl1').on('focusin', function() {
this.value != 0 || $(this).val( 4 );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="ddl1">
<option value="0">number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
You should call this function on change, not click - else, like you said, as soon as you click an option is selected.
$('#ddl1').change(function () {
DEMO
Edit: You should use a class to give the feel of the default option, you don't actually want it set to selected EACH time the user clicks:
<select id="ddl1">
<option value="0">number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" class="default">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
.default {
color: blue;
}
is this what you're looking for? http://jsfiddle.net/swm53ran/84/
$(function () {
var defaultValue = "4";
var count = 0;
$('#ddl1').click(function () {
if (count < 1) {
$('#ddl1').val(defaultValue);
count++;
}
});
});

jQuery select box with respect to the change event

I have a dropdown that will change with respect to the first value (i.e from_value).
What I'm trying to do is. There will be numbers from 1 to 10.
So if the first value is selected as 2, then the second value (i.e to_value) should be populated with 2 to 10 in the dropdown.
Below is my code and I'm not sure to run the loop here. Could someone help me in running the loop and do my task.
In other words - If the first drop down is selected with value 2, then the second dropdown should populate with 2,3,4,5,6,7,8,9,10
If the first dropdown is selected with 8, then the second dropdown should show 8,9,10
$("#from_value").change(function(){
var from_value = $("#from_value").val();
$("div.to_value").html('<label>To Value</label><select name="to_value" id="to_value"><option>'+ from_value +'</option></select>');
});
try
HTML
<select id="from_value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<select id="to_value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
JS
$("#from_value").change(function () {
var val = +this.value;
$("#to_value option").hide();
$("#to_value option:gt(" + val + "),#to_value option:eq(" + val + ")").show();
$("#to_value").val(val);
});
DEMO
Hope you are getting value in from_value.
Then you could try this
$("#from_value").change(function() {
var from_value = $("#from_value").val();
var opts = '';
for(var i = from_value; from_value <=10; i++)
{
opts = opts+'<option>' + i + '</option>';
}
$("div.to_value").html('<label>To Value</label><select name="to_value" id="to_value">' + opts + '</select>');
});

5 select boxes, hide values on each selected item

I have select boxes, I would like to hide (delete) items from options that are already selected:
<select name="gets" class="gets">
<option value="0">SELECT</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="gets" class="gets">
<option value="0">SELECT</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="gets" class="gets">
<option value="0">SELECT</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="gets" class="gets">
<option value="0">SELECT</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
So if I choosed option 1 from 1st select box, it should disappear from the rest, if I choose option 3 on select box 4, it should disappear from the rest
Thanks in advance
Say like below:
$('.gets').change(function(){
var value = $(this).val();
$('.gets').not(this).find('option[value="'+value+'"]').hide();
})
DEMO
If you want to exclude for SELECT option say like below
$('.gets').change(function(){
var value = $(this).val();
if(value!=0)
$('.gets').not(this).find('option[value="'+value+'"]').hide();
})
You'll need to find all the options with the same value in the other select's and hide them.
I would use something like this:
var selects = $('select');
selects.bind('change', function(e) {
var val = this.value;
//show all options
selects.find('option').show();
selects.each(function() {
if(!this.value) return;
//hide the selected value in the other selects
selects.find('option[value="' + this.value + '"]')
.filter(':not(:checked)')
.filter(':not([value="0"])')
.hide();
});
});
Example
You can try this:
$("select").on("change", function(){
var selectVal = $(this).val();
$("select").not($(this)).find("option[value="+ selectVal +"]").remove();
});
fiddle

JavaScript onchange event doesn't change div content

I want to replace the content of my <div id="score_here">10</div>, when I select a value from my drop-down <select id="ansRate" onchange="javascript:add_score(this);">. I have setup my JavaScript function which is shown below, but it doesn't work. What is the problem with this?
<div>
<select id="ansRate" onchange="javascript:add_score(this);">
<option value="0">Answer Rate</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div id="score_here" style="width:100px;height:100px;background-color:yellow;">
81
</div>
<script type="text/javascript">
function add_score(a){
var string = $("#questionScore").text();
var thenum = string.replace( /^\D+/g, '');
var add = $(a).val();
var total = parseInt(thenum) + parseInt(add);
document.getElementByID('score_here').innerHTML = total;
}
</script>
document.getElementById("id")
not
document.getElementByID("id")
should be:
document.getElementById('score_here').innerHTML = total;
:-)
Try this:
document.getElementByID is not the correct syntax, instead try document.getElementById
You can done everything by jQuery.
Just replace this line:
document.getElementByID('score_here').innerHTML = total;
to
$('#score_here').html(total);

jQuery/ Javascript change select options based on selected answer

I have the following code:
<table>
<tr><td>Item</td><td>Ranking</td></tr>
<tr><td>Apples</td><td><select id="apple" name="apple">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Oranges</td><td><select id="oranges" name="oranges">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Bananas</td><td><select id="bananas" name="bananas">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Lemons</td><td><select id="lemons" name="lemons">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Limes</td><td><select id="limes" name="limes">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Kiwi</td><td><select id="kiwi" name="kiwi">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
And here in jsFiddle: http://jsfiddle.net/XNYU2/
I'm trying to understand if this is possible and, if so, whether jQuery or Javascript is the best solution and how I'd go about making it happen.
It's a ranking system and what I need to happen is simple. If a user selects from any dropdown any value, that value needs to be removed from the other dropdowns. Conversely, if the user then unselects that value, it needs to return to all the dropdowns.
Try this:
$(function() {
$('select').on('change', function(event){ // This binds listeners to the change event on all the select elements
var sId = this.id; // store off the changed element id
var vId = this.value; // store off the changed element value
$('select').each( function(){ // this loops across the same set of elements
if(this.id != sId && this.value == vId) { // If it is not the triggering element and the value is the same, do something
this.options.selectedIndex = 0; // reset the value to 'rank'
}
});
});
});
You can do this in either jQuery or pure js, but jQuery selectors sure make it easy to loop through the elements and apply actions on change with very little code.
Upon re-reading you question, this accomplishes the same thing but slightly differently; the user is forced to have only 1 set of ordered ranking with no overlap, but we don't have to go to the trouble of removing/adding options.
Yes, this is a task for JavaScript. jQuery isn't an alternative to JavaScript but basically a toolset on top of it that makes manipulation of browser elements easier. I recommend using it, even though you'll need to understand JavaScript basics in order to use it effectively.
The key here is to decompose your problem; one is to perform an action once a Select has been changed. See here how this is done: http://api.jquery.com/change/
The second action is to actually implement the change, which is described e.g. here
Removing an item from a select box
The jsFiddle is here and that's the code:
var SelectOptions = ['Rank...', 1, 2, 3, 4, 5];
$(document).ready(function () {
$('#TheTable').find('select').change(function () {
var TheSelectedValue = parseInt($(this).val(), 10);
var TheSelectID = $(this).prop('id');
var TheHTML = "";
for (var i = 0; i < SelectOptions.length; i++) {
if (SelectOptions[i] !== TheSelectedValue) {
TheHTML = TheHTML + '<option value="';
TheHTML = (i === 0) ? TheHTML + '#' : TheHTML + SelectOptions[i];
TheHTML = TheHTML + '">' + SelectOptions[i] + '</option>';
}
}
$('#TheTable').find('select').each(function () {
if ($(this).prop('id') !== TheSelectID) {
$(this).html(TheHTML);
}
});
});
});
That's just one way to do it: I put it together in a few minutes and I'm sure it can be improved but that should get you started.

Categories