dynamic variable.optiones.selected - javascript

I'm new here in this Forum so this is my first question.
If I do something wrong just say it.
But now my Question: I've got a multiple select in a html file which values I save in a Database. When the site is loaded again I would like to select the select options that were selected before automaticly. For this I need something like this:
<select multiple id="a">
<option>tomato</option>
</select>
<select multiple id="b">
<option>apple</option>
</select>
<select multiple id="c">
<option>orange</option>
</select>
<select multiple id="d">
<option>cake</option>
</select>
<script>
var ids = ["a", "b", "c", "d"];
for(i=0, i < 4, i++){
var id = ids[i];
id.options[0].selected = true;
}
</script>
This is what I tried (on the web page the selects have more then one option). I've done also research in the internet, but I was not able to find good results.
The problem is the dynamic variable it's interpreted like it's a id of an html object by the compiler but it should be interpreted like a variable. I only need the right syntax.
But I couldn't get it to work because there is an error whit the dyanamic variable. How can I do this right, that it works?

So I done a lot o research again and now I done it this way:
document.getElementById(id).options[0].selected = true;

Related

Pre-select option in dropdown menu with URL

I'm working with this code snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// <![CDATA[
$(document).ready(function() {
// Parse your query parameters here, and assign them to a variable named `queryParams`
var option = queryParams.type;
$("#GCValue").val(option);
});
// ]]>
</script>
I don't have a lot of latitude with how I can affect the page, this is in the <body> section of the page, since I don't have access to the <head> tag.
I have this form:
<select id=GCValue>
<option val="10">10</option>
<option val="25">25</option>
<option val="50">50</option>
<option val="100">100</option>
<option val="250">250</option>
</select>
and I would like to use the URL of the page to select one of these five options (currently default is 10). I think it's supposed to be either https://www.mywebsite.com/gift-card/?type=2 or https://www.mywebsite.com/gift-card/?GCValue=2 but neither work. I'm pretty new to JS and JQuery, so I know I have to be doing something wrong. Any help appreciated.
According to your code your URL should be something like
https://www.mywebsite.com/gift-card/?type=10
You have to pass the option values to the URL instead of the option indexes based on your current code.

Changing displayed Object based on selection

I haven't been able to find anything specific to this case. Im trying to change the displayed html object based on the selection from a drop down menu.
So far I have:
<div class="card-body"></div>
<object id="dategraph" data="assets/img/date_manual_interventions_prefix.html"></object>
<select id="DateGraphList">
<option value="assets/img/date_manual_interventions_prefix.html">
Date Graph - Manual Interventions per 1000Mb - SL
</option>
<option value="assets/img/date_manual_interventions_prefix_v.html">
Date Graph - Manual Interventions per 1000Mb - DL
</option>
<option value="assets/img/date_manual_interventions_prefix_full.html">
Date Graph - Manual Interventions per 1000Mb - FN
</option>
</select>
With the js script for this being:
function setCar() {
var obj = document.getElementById("dategraph");
obj.data = this.value;
return false;
}
document.getElementById("DateGraphList").onchange = setCar;
Could some one point out where i'm going wrong?
Thanks in advance!
Try setting the data attribute of the <object> by using Element.setAttribute.
data
The address of the resource as a valid URL. At least one of data and type must be defined.
Note: Don't forget to set the content type as stated above.
<object
id="dategraph"
type="text/html"
data="assets/img/date_manual_interventions_prefix.html">
</object>
function setCar(e) {
const obj = document.querySelector('#dategraph');
obj.setAttribute('data', e.target.value);
}
document.querySelector('#DateGraphList').addEventListener('change', setCar);

Multiple select with one more value associated with it in angular js

I'm planning to add multiple select field into my project but the problem is I want to capture one more integer value along with every selected value,Can anyone suggest me best way of selecting the value along with multiple select. My multiple select dropdown look like this.. and thanks in advance
<div class=" multiselectdd "><multiselect ng-model="vm.inventory.SiteId" options="site.value as site.label for site in vm.sites" data-header-key="header"data-divider-key="divider" scroll-after-rows="5"filter-after-rows="0">
</div>
I don't get it properly but if you want to select more than one object in your select list you can:
Javascript Side
$scope.SelectedChanged = function (yourModel) {
if (yourModel.length > 1) {
$scope.newModel = yourModel[1];
}
};
HTML Side
<select name="yourElementName" multiple ng-model="yourModel" ng-change="SelectedChanged(yourModel)">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Tree</option>
<option value="3">Four</option>
</select>
and call your model to test
<span>{{yourModel}} - Second Value: {{newModel}} </span>
When you select multiple element lets say " One and Two " you will see like:
Output
["0","1"] - Second Value: 1

How to access the javascript variable inside html tags

I wanted to added javascript variable inside html code.
Here is my code:
<select id="currentrun" name="currentrun" >
<option value=""><script>selectedrun</script></option>
</select>
and my js function
var currentrun="";
var selectedrun="";
function setCurrentRun()
{
currentrun = document.getElementById("runlist");
selectedrun = currentrun.options[currentrun.selectedIndex].value;
}
But this doesn't work.
Can anyone help me to do this.
Thanks in advance.
You don't have to run the script like that.
The value of the currentrun can be retrieved as:
document.getElementById('currentrun').value
And for completeness, if you want to trigger a JavaScript function call each time the selection is modified, do this:
<select onchange="my_function();">
<option>...</option>
</select>
It seems like you are trying to set the text of the option element with javascript. Here is one way you can do it using the id of the element to get it and then set the text property of the element to your javascript variable:
<select id="currentrun" name="currentrun" >
<option id="currentoption" value=""></option>
</select>
<script>
document.getElementById("currentoption").text = selectedrun;
</script>
Be sure to put any necessary javascript that declares and sets the selectedrun variable before the above script.

Get text inside HTML comment tag?

I have the following HTML:
<!--
<option value="HVAC">HVAC</option>
<option value="Cooling">|---Cooling</option>
<option value="Heating">|---Heating</option>
-->
....
I fetch this file dynamically using jQuery's get method and store it in a string variable named load_types.
How can I strip the HTML comment tags and everything outside of them? I only want the inside HTML:
<option value="HVAC">HVAC</option>
<option value="Cooling">|---Cooling</option>
<option value="Heating">|---Heating</option>
I tried to use the solutions here but nothing worked properly--I just get null as a match.
Thanks for the help!
Please never use regex to parse HTML. You can use the following instead:
var div = $("<div>").html(load_types),
comment = div.contents().filter(function() {
return this.nodeType === 8;
}).get(0);
console.log(comment.nodeValue);
DEMO: http://jsfiddle.net/HHtW7/
You can simply get the html of the parent tag where the comment is and do a .replace("<!--","").replace("-->", "") which will simply remove the comment tags and then append this markup to some other parent or replace your current markup or create a new parent for it and append it.
This will allow you to use the jQuery selectors to retrieve the required data.
var comment = '<!-- <option value="HVAC">HVAC</option> <option value="Cooling">|---Cooling</option> <option value="Heating">|---Heating</option> --> ';
jQuery("#juni").append("<select>"+comment.replace("<!--", "").replace("-->", "") + "</select>")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="juni"></div>

Categories