Develop Reference

Need to select text of selected dropdown using JavaScript

I have a dropdown with values. I have an array array with a list of values that will match the drop down values. If the value of text option of the dropdown exists in the array, it shouldn't show in the dropdown as an option. I am stuck on the approach I should use. This is what I have so far.
HTML
Car Plates:
<select title='car/id' id='car_x0020_Plate_x002f'>
<option selected="selected" value="0">none</option>
<option value="16">233-jj2</option>
<option value="10">934-zxy</option>
<option value="90">330-nbh</option>
<option value="11">930-orj</option>
</select>
JavaScript
var hideOption = ['233-jj2', '330-nbh']
var e = document.querySelector([id^='car']);
var strUser = e.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;
for (var x=0; x<hideOption.length; x++){
if (hideOption[x] === strUser){
//remove from dropdown
}
}

I made your idea in a very simple way, if you have any question please tell me
var hideOption = ['233-jj2', '330-nbh'],
select = document.getElementById("select");
for (let i = 0; i < hideOption.length; i = i + 1) {
for (let t = 1; t < select.options.length; t = t + 1) {
if (hideOption[i] == select.options[t].textContent) {
select.options[t].remove();
}
}
}
Car Plates:
<select title='car/id' id='select'>
<option selected="selected" value="0">none</option>
<option value="16">233-jj2</option>
<option value="10">934-zxy</option>
<option value="90">330-nbh</option>
<option value="11">930-orj</option>
</select>

// remove from dropdown
use this code to remove from dropdown
e.removeChild(e.options[e.selectedIndex])
you can use this also
e.selectedOptions[0].remove()

var hideOption = ['233-jj2', '330-nbh']
var e = document.querySelector("[id^='car']");
var selTextArr = Array.from(e.options).map(option => option.text)
for (var x=0; x<selTextArr.length; x++){
if (hideOption.includes(selTextArr[x])){
e.remove(x)
}
}
Car Plates:
<select title='car/id' id='car_x0020_Plate_x002f'>
<option selected="selected" value="0">none</option>
<option value="16">233-jj2</option>
<option value="10">934-zxy</option>
<option value="90">330-nbh</option>
<option value="11">930-orj</option>
</select>

var options = document.querySelector("[id^='car']").children;
var hideOption = ['233-jj2', '330-nbh']
for (var i = 0; i < options.length; i++){
if(hideOption.indexOf(options[i].text) > -1){
options[i].remove();
}
}

Append options to select box depend on extracted part from array

I have 4 selectboxs moduleName, submoduleName, ProgrameName and last selectbox has all data for username, module, submodule and programe name merged and splited with ";" between each other, I need: when user select module name from moduleName Selectbox it filters values in all data selectbox and splites submoduleNames under this moduleName and append it as options to submoduleName Selectbox, also the same when user select from submoduleName selectbox it filters programeNames under this module and subModuleNames and append it as options in programeName selectbox. I tried to splite each line in allData selectbox but i failed to continue. here what i tried but it is not working.
Thank you for your help.
$(document).ready(function(){
function check(){
var lines = $('#splitedOptions').val().split(/\n/);
var texts = [];
for (var i=1; i < lines.length; i++) {
texts.push(lines[i]);
}
for (var i=0; i < texts.length; i++) {
var extractedPart = texts[i].split(';'),
ModuleNameVal = $("#moduleName option:selected").val();
if(extractedPart[1] == ModuleNameVal){
var newOption = "<option value='"+extractedPart[2]+"'>"+extractedPart[2]+"</option>";
$('#SubModuleName').append(newOption);
}
}
}
function c1() {
var optionsCount = $('#allData').find('option').size();
var textArea ="";
for (var i = 1; i <= optionsCount; i++) {
if(i!=1){
textArea += '\n';
}
var xItem = $('#allData').find('option:nth-child(' + (i) + ')').text();
textArea += xItem ;
}
$('#splitedOptions').val('');
$('#splitedOptions').val(textArea);
check();
}
$('#moduleName').change(function(){
c1()
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>ModuleName:</label>
<select class="moduleName" id="moduleName">
<option value="HR">HR</option>
<option value="Marketing">Marketing</option>
<option value="Purchase">Purchase</option>
<option value="Finance">Finance</option>
</select><br><br>
<label>SubModuleName:</label>
<select class="SubModuleName" id="SubModuleName"></select><br><br>
<label>ProgrameName:</label>
<select class="programeName" id="programeName"></select><br><br>
<label>All Data:</label>
<select class="allData" id="allData">
<option value="userName;HR;Transactions;EmployeeMaster">Option1</option>
<option value="userName;HR;Master;EmployeeMaster">Option2</option>
<option value="userName;Marketing;Master;MarketingMaster">Option3</option>
<option value="userName;HR;Reports;HRReports">Option4</option>
<option value="userName;Purchase;PurchaseOrders;LPO">Option5</option>
<option value="userName;Purchase;PurchaseOrders;IPO">Option6
<option value="userName;Finance;Master;FinanceMasterPrograme">Option7</option>
<option value="userName;Finance;Reports;FinanceReportsPrograme">Option8</option>
</select><br><br>
<label>splited Options:</label>
<textarea id="splitedOptions" name="splitedOptions" ></textarea>

One way to achieve above is to filter the options from allData select-box and get only those option which has the value which user has selected using value*="yourvalue".
Then , onces you get the options you need to know which select-box has been change so that we can get required value only when we do split and pass required index .
Lastly , we need to loop through the options which we have got from filtering select-box .Suppose user select Master so there are Master in many places so to avoid getting data from all option i have check the value of select with the first select-box as well if matches apppend only those options.
Demo Code :
$('select').change(function() {
//get value
var name = $(this).val();
//filter option and get only option which has the value which user has slected
var s = $("#allData").find('option').filter('[value*=' + name + ']').each(function(ele) {
return $(this).val();
});
var module_namess;
var index;
//check the id of select-box
if ($(this).attr("id") == "moduleName") {
module_namess = "SubModuleName";
index = 2;//set index
} else if ($(this).attr("id") == "SubModuleName") {
name = $("#moduleName").val()
module_namess = "programeName"
index = 3
}
$("#" + module_namess).empty()
$('#' + module_namess).append("<option >Select one</option>")
var valuess = ''
//loop through options
for (var i = 0; i < s.length; i++) {
valuess += $(s[i]).val()
//if first value is same
if ($(s[i]).val().split(";")[1] == name) {
var sub_value = $(s[i]).val().split(";")[index]//get the value
var newOption = "<option value='" + sub_value + "'>" + sub_value + "</option>";
$('#' + module_namess).append(newOption);//append
}
}
$('#splitedOptions').val(valuess);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>ModuleName:</label>
<select class="moduleName" id="moduleName">
<option value="HR">HR</option>
<option value="Marketing">Marketing</option>
<option value="Purchase">Purchase</option>
<option value="Finance">Finance</option>
</select><br><br>
<label>SubModuleName:</label>
<select class="SubModuleName" id="SubModuleName"></select><br><br>
<label>ProgrameName:</label>
<select class="programeName" id="programeName"></select><br><br>
<label>All Data:</label>
<select class="allData" id="allData">
<option value="userName;HR;Transactions;EmployeeMaster">Option1</option>
<option value="userName;HR;Master;EmployeeMaster">Option2</option>
<option value="userName;Marketing;Master;MarketingMaster">Option3</option>
<option value="userName;HR;Reports;HRReports">Option4</option>
<option value="userName;Purchase;PurchaseOrders;LPO">Option5</option>
<option value="userName;Purchase;PurchaseOrders;IPO">Option6
<option value="userName;Finance;Master;FinanceMasterPrograme">Option7</option>
<option value="userName;Finance;Reports;FinanceReportsPrograme">Option8</option>
</select><br><br>
<label>splited Options:</label>
<textarea id="splitedOptions" name="splitedOptions"></textarea>

Select Index not working as expected

DOM:
<select name="statusId">
<option value="">Choose a status</option>
<option value="12856801">Not a Fit</option>
<option value="12882961">Contacted </option>
<option value="13071711">No Contact Info</option>
I found this code and tried it:
var textToFind = 'Contacted';
var dd = document.getElementsByName('statusId')[0];
for (var i = 0; i < dd.options.length; i++) {
if (dd.options[i].text === textToFind) {
dd.selectIndex = i;
break;
}
}
It's not setting the value, it's just returning 2
What am I doing wrong?

selectedIndex not selectIndex
I can't read.

hide() and show() select option not working in chrome

I am trying to do as selected option moves to another select box with its corresponding optgroup label using below code,
My jsp :
<select name="SelectFeatures" id="SelectFeatures" multiple="multiple">
<optgroup label="Lesson">
<option>about myself</option>
<option>about yourself</option>
</optgroup>
<optgroup label="Game">
<option>about my game</option>
</optgroup>
<optgroup label="Worksheet">
<option>content</option>
<option>content2</option>
</optgroup>
</select>
<select name="SelectedFeatures" id="SelectedFeatures" multiple="multiple">
</select>
My Jquery :
$(document).ready(function()
{
$('#SelectFeatures optgroup').clone().hide().appendTo('#SelectedFeatures');
$('#SelectedFeatures option').hide();
$('#SelectFeatures').on('click', 'option', function()
{
var thisText = $(this).text();
this.disabled = true;
var thisGroup = $(this).parent();
var targetGroup = $('#SelectedFeatures optgroup[label="' + thisGroup.attr('label') + '"]');
targetGroup.show();
targetGroup.find('option').filter(function() { return $(this).text() == thisText; }).show();
});
$('#SelectedFeatures').on('click', 'option', function()
{
var thisText = $(this).text();
$(this).hide();
$('#SelectFeatures option').filter(function() { return $(this).text() == thisText; }).prop('disabled', false);
var thisGroup = $(this).parent();
if (thisGroup.find('option:visible').length == 0)
{
thisGroup.hide();
}
});
});
Above code working very fine in firefox but In chrome 34.0 this $('#SelectedFeatures option').hide(); not works, In chrome 37.0 all options will hiding when click on single option and In chrome 39.0 that selected options not shows like optgroup option.
My fiddle : http://jsfiddle.net/Manivasagam/f7xhbLf7/4/
How to change my code as Jquery cross browser compatibility?

Hiding options is incorrect if you want cross-browser. You should insert/remove/disable options dynamically.
$(function() {
$("#SelectFeatures").on("click", "option", function() {
var _optgroup_index = $(this).parent().index();
var _optgroup_label = $(this).parent().attr("label");
var $optgroup = $('#SelectedFeatures optgroup[label="' + _optgroup_label + '"]');
var _option_index = $(this).index();
var _option_label = $(this).text();
var $option = $('<option data-index="' + _option_index + '"></option>').text(_option_label);
var $elements;
if ($optgroup.length === 0) {
// create new optgroup, append and reorder
$optgroup = $('<optgroup data-index="' + _optgroup_index + '" label="' + _optgroup_label + '"></optgroup>').appendTo("#SelectedFeatures");
$option.appendTo($optgroup);
$elements = $("#SelectedFeatures optgroup");
if ($elements.length > 1) {
$elements.detach().sort(function(a, b) {
return $(a).attr("data-index") - $(b).attr("data-index");
}).appendTo("#SelectedFeatures");
}
} else {
// append new option and reorder
$option.appendTo($optgroup);
$elements = $optgroup.find("option");
if ($elements.length > 1) {
$elements.detach().sort(function(a, b) {
return $(a).attr("data-index") - $(b).attr("data-index");
}).appendTo($optgroup);
}
}
$(this).prop("disabled", true);
});
$("#SelectedFeatures").on("click", "option", function() {
var _option_label = $(this).text();
$("#SelectFeatures option").filter(function() {
return $(this).text() === _option_label;
}).prop("disabled", false);
if ($(this).siblings().length === 0) {
$(this).parent().remove();
} else {
$(this).remove();
}
});
});
select {
width: 12em;
height: 24em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="SelectFeatures" id="SelectFeatures" multiple="multiple">
<optgroup label="Lesson">
<option>about myself</option>
<option>about yourself</option>
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
</optgroup>
<optgroup label="Game">
<option>about my game</option>
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
</optgroup>
<optgroup label="Worksheet">
<option>content</option>
<option>content2</option>
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
</optgroup>
</select>
<select name="SelectedFeatures" id="SelectedFeatures" multiple="multiple">
</select>

What is wrong with that select options?

I am just trying to make a simple calculation with the values of selected options, however I get false result:
pickUp 9 and returnTime 10, it gives no (which must be yea)
but pickUp time 11 and returnTime 14, it gives yea(which is right) so it gives the right result with some specific numbers and with some numbers not..
Here is the (pickUp)select options:
<select id="ophalenUur" class="timePicker selectOption">
<option value="-">Kies Tijd</option>
<option value="8">08.00</option>
<option value="8.5">08.30</option>
<option value="9">09.00</option>
<option value="9.5">09.30</option>
<option value="10">10.00</option>
<option value="10.5">10.30</option>
<option value="11">11.00</option>
<option value="11.5">11.30</option>
<option value="12">12.00</option>
<option value="12.5">12.30</option>
<option value="13">13.00</option>
<option value="13.5">13.30</option>
<option value="14">14.00</option>
<option value="14.5">14.30</option>
<option value="15.">15.00</option>
<option value="15.5">15.30</option>
<option value="16">16.00</option>
<option value="16.5">16.30</option>
<option value="17">17.00</option>
<option value="17.5">17.30</option>
<option value="18">18.00</option>
<option value="18.5">18.30</option>
<option value="19">19.00</option>
<option value="19.5">19.30</option>
<option value="20">20.00</option>
</select>
and js:
var pickUp = 0;
var returnTime =0;
$('#ophalenUur').change(function() {
pickUp = $('#ophalenUur option:selected').val();
$('.pickUp').text("PickUp: " + pickUp);
});
$('#inleverenUur').change(function() {
returnTime = $('#inleverenUur option:selected').val();
$('.returntime').text("return: " + returnTime);
if(returnTime > pickUp){ alert("yea");
} else { alert("no"); }
});
Fiddle: http://jsfiddle.net/jLAaq/27/
What is wrong here? I am looking for hours and I can't see:/

because you are doing a string comparison
var pickUp = 0;
var returnTime = 0;
var totalExtra = 0;
$('#ophalenUur').change(function () {
//conver the value string to number by prfixing it with + or you can use parseFloat(this.value)
pickUp = +this.value;
$('.pickUp').text("PickUp: " + pickUp);
});
$('#inleverenUur').change(function () {
returnTime = +this.value;
$('.returntime').text("return: " + returnTime);
if (returnTime > pickUp) {
alert("yea");
} else {
alert("no");
}
});
Demo: Fiddle

I think the reason could be returnTime and pickUp is string. so "9">"10".
Try to use parseFloat function to parse returnTime and pickUp.

You were comparing the integer as string. You can use the parseFloat method
Demo Link
CODE:
var pickUp = 0;
var returnTime =0;
var totalExtra = 0;
$('#ophalenUur').change(function() {
pickUp = $('#ophalenUur option:selected').val();
$('.pickUp').text("PickUp: " + pickUp);
});
$('#inleverenUur').change(function() {
returnTime = $('#inleverenUur option:selected').val();
$('.returntime').text("return: " + returnTime);
if(parseFloat(returnTime) > parseFloat(pickUp)){
alert("yea");
}else{
alert("no");
}
});