We Keep Coding

Check existing selections in dropdownlist during record edit

I have some rows in a grid that are editable by a user. When the user clicks the edit button in a grid row, i'm displaying a multi-select dropdownlist
("ddlEditRegionList") with options to choose from. When this dropdownlist is shown i want to keep the already saved selections checked.
I'm trying with the code snippet below but that does get my existing selections.
//Get currently selected options into array regionArr
var region = $.trim($tr.find(".tdRegion").html());
$("#hidRegionList").val($.trim($tr.find(".tdRegion").html()));
var regionArr = region.split(',');
$tr.find(".tdRegion").html($("#divRegionList"));
//keep selected options checked in edit mode - this isn't working
$('#ddlEditRegionList option').map(function () {
for (var i = 0; i < regionArr.length; i++) {
if ($.trim($(this).text()) == $.trim(regionArr[i])) {
return this;
}
}
}).attr('selected', 'selected');
Note that i'm using jquery-3.2.1

Try .val() instead of .text(), Like:
if ($.trim($(this).val()) == $.trim(regionArr[i])) {
return this;
}

My JS script only highlights the option doesn't change it to the one I want in the box

So my script doesn't change the the option in the drop-menu to the one I want it to be.
Here is a fiddle:
https://jsfiddle.net/kerandom12/yzn3h96L/22/
function add(){
var array = document.getElementsByTagName("option");
for(i=0;i<array.length;i++){
var item = array[i].innerHTML;
if (item == 6.5) {
document.getElementsByTagName("select")[0].selectedIndex = i;
return item;
}
}
}
When I run the code and click on the drop menu it only shows a 6.5 highlighted instead of being chosen and changed to that value.
Any Idea why?
NEW FIDDLE:
https://jsfiddle.net/kerandom12/yzn3h96L/57/

Display index on select hover

I'm trying to display the index of the <option> element in a select. However, it will not alert the selected index. How would I alert the index of the <option> element I am hovering over?
$("#sel").hover(function (e)
{
var $target = $(e.target);
if ($target.is('option'))
{
var selectedindex = $(this).parent().prop('selectedIndex');
if (selectedindex != 0)
{
alert(selectedindex);
}
}
});
Doesn't seem to be recognizing if it is an option
http://jsfiddle.net/poppypoop/TFDMr/1/

You can just do:
var index = $(this).find("option:selected").index("option");
Fiddle: http://jsfiddle.net/TFDMr/2/

changing text for a selected option only when its in selected mode

I am not sure if I confused everyone with the above title. My problem is as follows.
I am using standard javascript (no jQuery) and HTML for my code. The requirement is that for the <select>...</select> menu, I have a dynamic list of varying length.
Now if the length of the option[selectedIndex].text > 43 characters, I want to change the option[selectecIndex] to a new text.
I am able to do this by calling
this.options[this.selectedIndex].text = "changed text";
in the onChange event which works fine. The issue here is once the user decides to change the selection, the dropdownlist is showing the pervious-selected-text with changed text. This needs to show the original list.
I am stumped! is there a simpler way to do this?
Any help would be great.
Thanks

You can store previous text value in some data attribute and use it to reset text back when necessary:
document.getElementById('test').onchange = function() {
var option = this.options[this.selectedIndex];
option.setAttribute('data-text', option.text);
option.text = "changed text";
// Reset texts for all other options but current
for (var i = this.options.length; i--; ) {
if (i == this.selectedIndex) continue;
var text = this.options[i].getAttribute('data-text');
if (text) this.options[i].text = text;
}
};
http://jsfiddle.net/kb7CW/

You can do it pretty simply with jquery. Here is a working fiddle: http://jsfiddle.net/kb7CW/1/
Here is the script for it also:
//check if the changed text option exists, if so, hide it
$("select").on('click', function(){
if($('option#changed').length > 0)
{
$("#changed").hide()
}
});
//bind on change
$("select").on('change', function(){
var val = $(":selected").val(); //get the value of the selected item
var text = $(':selected').html(); //get the text inside the option tag
$(":selected").removeAttr('selected'); //remove the selected item from the selectedIndex
if($("#changed").length <1) //if the changed option doesn't exist, create a new option with the text you want it to have (perhaps substring 43 would be right
$(this).append('<option id="changed" value =' + val + ' selected="selected">Changed Text</option>');
else
$('#changed').val(val) //if it already exists, change its value
$(this).prop('selectedIndex', $("#changed").prop('index')); //set the changed text option to selected;
});

to see if item in dropdownList has been selected

I would like to know what the best way would be to loop through a dropdown list in html to see if and item has been selected or not.
I know in C# it would be something along the lines of
int selected = cmbFamily.SelectedIndex;
for (int loop = 0; loop < cmbFamily.Items.Count; loop++)
{
if (selected == -1)
{
MessageBox.Show("please select an item", "Please", MessageBoxButtons.OK, MessageBoxIcon.Error);
break;
}
}
how would I go about in doing this with javascript?
<tr style="font-size:12pt; font-weight:bold; color:#FFFFFF; font-family:High Tower Text;">
<td>Family to join:</td>
<td><select name="drpFamily">
<option/>-select-
<option/>Gambino
<option/>Genovese
<option/>Lucchese
<option/>Colombo
<option/>Bonanno
</select><font color="red">*</font></td>
</tr>
Kind regards
Arian

First off you HTML code is totally wrong. It is not </option>text, it is <option>text</option>
To loop through the options it is as simple as
//var options = document.getElementById("selectId").options;
var options = document.formName.selectName.options;
for(var i=0;i<options.length;i++){
if(options[i].selected){
alert(options[i].value);
}
}
but there is no need to loop through a single select. The easiest way is just to use selected index for a single select.
//var sel = document.getElementById("selectId");
var sel = document.formName.selectName;
var opt = sel.options[sel.selectedIndex];
alert(opt.value);

First: your HTML is wrong.
It should be
<option>-select-
...
or
<option>-select-</option>
...
If you just want the selected value, you can get it via the value attribute of the select element:
var value = document.getElementsByName('drpFamily')[0].value
This only works if there is only one element with name drpFamily. If not, you have to find an appropriate way to select it.
You might want to compare it against the first value (which is selected by default)
if(value !== '-select-')
You could also add a change event listener to the select element:
document.getElementsByName('drpFamily')[0].onchange = function() {
if(this.value !== '-select-') {
//a value other '-select-' than was selected
}
}