Develop Reference

How can I get the latest HTML tags of a changeable elements, like Select, Checkbox, Input in JS/Jquery?

I need to get the HTML tags of the changeable element so that I can pass them to create a PDF. But, whenever I use element.innerHTML or element.html(), I get the HTML tags generated after page load but not after I made the changes.
In HTML:
<select id="testSelect">
<option id="no">-- not selected --</option>
<option id="one" selected>1</option>
<option id="two">2</option>
</select>
In JS:document.getElementById("testSelect").innerHTML
It returns:
"
<option id="no">-- not selected --</option>
<option id="one" selected="">1</option>
<option id="two">2</option>
"
And now if I manually change the value to 2, then
In JS:
document.getElementById("testSelect").value
"2"
as you can see the value is changed. But, the HTML tags won't change as
In JS:
document.getElementById("testSelect").innerHTML
"
<option id="no">-- not selected --</option>
<option id="one" selected="">1</option>
<option id="two">2</option>
"
Still, I get the old tags. Instead, I want something like this.
"
<option id="no">-- not selected --</option>
<option id="one">1</option>
<option id="two" selected="">2</option>
"

I made this script for you hope it helps you!
var selectBox=document.querySelector("#testSelect");
selectBox.addEventListener("change", function(){
const selectBoxOptions=selectBox.querySelectorAll("option");
selectBoxOptions.forEach((option)=>{
option.removeAttribute("selected");
});
detectOptionObjectByValue(this, this.value).setAttribute("selected", "selected");
});
function detectOptionObjectByValue(selectBox, value){
const options=selectBox.querySelectorAll("option");
let pos=0, obj=false;
options.forEach(function(option){
option.value==value?obj=options[pos]:0;
pos++;
});
return obj;
}
<select id="testSelect">
<option id="no">-- not selected --</option>
<option id="one" selected>1</option>
<option id="two">2</option>
</select>

You can make a function which will iterate through all options and set all the selected attributes to false
$('select option[value=' + i + ']').attr("selected",false);
Then based on the value selected set the attribute to true
$('select option[value=' + this.value + ']').attr("selected",true);
const dropdownElement = document.getElementById('testSelect')
dropdownElement.onchange = function () {
clearSelected()
$('select option[value=' + this.value + ']').attr("selected",true);
console.log("value selected: " + this.value);
console.log("html: " + dropdownElement.innerHTML)
};
// set all the options to unselected
function clearSelected(){
var elements = dropdownElement.options;
for(var i = 0; i < elements.length; i++){
$('select option[value=' + i + ']').attr("selected",false);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="testSelect">
<option id="no" value="0">-- not selected --</option>
<option id="one" value="1" selected>1</option>
<option id="two" value="2">2</option>
</select>

On jQuery site you have similar question explained:
https://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/
$(function(){
$('#select').change(function(){
$('#output-value').text($(this).val());//get value
$('#output-element').text($(this).find('option:selected').text());//get text of selected element
$(this).find('option').each(function(){
$(this).attr('selected', $(this).is('option:selected')); //adds and removes selected attribute
});
$('#output-html').text($(this).html());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select" >
<option>--</option>
<option value="1" >1 val</option>
<option value="2" >2 val</option>
<option value="3" >3 val</option>
</select>
<br/>
Value
<div id="output-value" ></div>
Element
<div id="output-element" ></div>
HTML
<div id="output-html"></div>

Make 2 <select> statements work and dont crash the script

Im putting multiples select in my code that are hidden and got a principal select that makes visible the other selec depending in the value selected, but when you choose a value in the second select it changes the second visible select to another, how can I prevent that to happen
Its a catalog in a static html that interacts with a SQL Server via php, so I need the select to compare it with the ID´s and make inserts and updates
This is the script:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
function myFuction(){
//Getting Value
//var selValue = document.getElementById("singleSelectDD").value;
var selObj = document.getElementById("MENU");
var selValue = selObj.options[selObj.selectedIndex].value;
//Setting Value
document.getElementById("valorsel").value = selValue;
}
</script>
And this are the examples:
<select name="MENU" id="MENU" onchange="myFuction()">
<option value="" selected></option>
<option value="1">Area</option>
<option value="2">Bancos</option>
<option value="3">CFDI</option>
<option value="4">Departamentos</option>
<option value="5">Empresa</option>
<option value="6">Giro Comercial</option>
<option value="7">Negocio</option>
</select><br><br>
<p>Texto Global</p>
<input type="text" name="GLOBAL" id="GLOBAL" value="" placeholder="Texto global">
</div>
<div class="1 box">
<p>Seleccione el Area deseada</p>
<input type="text" name="Txt_Area" id="Txt_Area" value="" placeholder="AREA">
<select name="AREA" id="AREA" placeholder="Seleccione Area deseada>
<option value="" selected></option>
<option value="1">AREA 1</option>
<option value="2">AREA 2</option>
<option value="3">AREA 3</option>
</select>
I want to be able of having both select on screen to insert or update the information

Instead of having $("select").change(function(){, it's better that you have $("#MENU").change(function() { because otherwise it will detect all the select menus that are changing instead of just the first one like you want.
$(document).ready(function() {
$("#MENU").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else {
$(".box").hide();
}
});
}).change();
});
function myFuction() {
var selObj = document.getElementById("MENU");
var selValue = selObj.options[selObj.selectedIndex].value;
//Setting Value
//document.getElementById("valorsel").value = selValue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select name="MENU" id="MENU" onchange="myFuction()">
<option value="" selected></option>
<option value="1">Area</option>
<option value="2">Bancos</option>
<option value="3">CFDI</option>
<option value="4">Departamentos</option>
<option value="5">Empresa</option>
<option value="6">Giro Comercial</option>
<option value="7">Negocio</option>
</select><br><br>
<p>Texto Global</p>
<input type="text" name="GLOBAL" id="GLOBAL" value="" placeholder="Texto global">
</div>
<div class="1 box">
<p>Seleccione el Area deseada</p>
<input type="text" name="Txt_Area" id="Txt_Area" value="" placeholder="AREA">
<select name="AREA" id="AREA" placeholder="Seleccione Area deseada">
<option value=" " selected></option>
<option value="1 ">AREA 1</option>
<option value="2 ">AREA 2</option>
<option value="3 ">AREA 3</option>
</select>

How I can add data attribute into Hyperlink?

How to add multiple options from the selection box to the data attribute data-clc in the hyperlink?
Working in textarea but TestLink hyperlink not working.
$("#selection").change(function() {
$('#selected').html(' ');
$("#selection option:selected").each(function() {
var $this = $(this);
if ($this.length) {
var selText = $this.text();
console.log(selText);
$('#selected').append(selText + ', ');
$('#comeMan').attr('data-bid', selText);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple="" style="width:200px;" id="selection" name="fm_fields[]">
<option value="90" selected>Collection1</option>
<option value="91" selected>Collection2</option>
<option value="92">Collection3</option>
<option value="93">Collection4</option>
<option value="94">Collection5</option>
<option value="95">Collection6</option>
</select>
<br/>
<br/>
<div>
TestLink
<textarea id="selected" rows="1" cols="50" readonly></textarea>
</div>
Goal
For example:
<a href="#"
id="comeMan" data-clc=" Collection2,Collection3,Collection4">TestLink</a>

Rather than build up a string of the selected items, you can just set the attribute to the value (val() in JQuery) of the select element.
Also, to more easily work with data- attributes, JQuery provides the .data() method (used below);
$("#selection").change(function() {
$('#comeMan').data('clc', $('#selection').val());
console.log( $('#comeMan').data('clc'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple style="width:200px;" id="selection" name="fm_fields[]">
<option value="90">Collection1</option>
<option value="91">Collection2</option>
<option value="92">Collection3</option>
<option value="93">Collection4</option>
<option value="94">Collection5</option>
<option value="95">Collection6</option>
</select>
<br/>
<br/>
<div>
TestLink
</div>

How to get multiple values from an HTML <select> element

How to take the values of value1 and value2 in two variables using javascript?
<select class="form-control" id="country" name="country">
<option value="**value1**" "**value2**" >Select Item</option>
</select>

You could make your own attribute. I know you probably do not want to get the element with an ID, but I don't know the context. You can just call getAttribute on the option and use any name you gave to the "custom" attribute.
window.addEventListener('load', ()=>
{
const option = document.getElementById('option');
function init()
{
//Use this to get the values
console.log(option.getAttribute('other-value'));
}
init();
});
<select class="form-control" id="country" name="country">
<option id="option" value="value1" other-value="value2">Select Item</option>
</select>

I don't know what you really want to do with your piece of code,
but here is a proper way to use the option elements, and a way to split multiple values with a fixed separator:
var example = document.getElementById('example');
example.addEventListener('change', function() {
// Console displays the “value”, and not the text, of the selected option
console.log("option value:", example.value);
});
// Here is what I'll do with your "multiple" values
var country = document.getElementById('country');
var options = country.querySelector('option');
var values = options.value.split("/");
values.forEach(function(val) {
country.innerHTML += "<option value=" + val + ">" + val + "</option>";
});
<p>My simple example</p>
<select id="example" name="country">
<option value="--">Select Country</option>
<option value="GB">Great Britain</option>
<option value="FR">France</option>
</select>
<br>
<br>
<p>Example with option getting splitted</p>
<select class="form-control" id="country" name="country">
<!-- Let's say your multiple values are separated by a "/" -->
<option value="**value1**/**value2**">Select Item</option>
</select>
Hope it helps.

$('select').on('change', function() {
console.log( $('#country').val() );
console.log($(this).find(':selected').data('second'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="country" name="country">
<option value="value1" data-second ="value2" >Select Item 1</option>
<option value="value3" data-second ="value4" >Select Item 2</option>
</select>

Can't get jquery to set value of select input when value of first select changes

I'm trying to update the value of a select input when I change the value of another select input. I cannot get anything to happen on the page and want to make sure I don't have a syntax error or some other dumb thing in this code.
<div class="group">
<div class="inputs types">
<strong style="font-size:13px;">Category:</strong>
<select name="id" id="ctlJob">
<option value="1">Automotive</option>
<option value="2">Business 2 Business</option>
<option value="3">Computers</option>
<option value="4">Education</option>
<option value="5">Entertainment & The Arts</option>
<option value="6">Food & Dining</option>
<option value="7">Government & Community</option>
<option value="8">Health & Beauty</option>
<option value="9">Home & Garden</option>
<option value="10">Legal & Financial Services</option>
<option value="11">Professional Services</option>
<option value="12">Real Estate</option>
<option value="13">Recreation & Sports</option>
<option value="14">Retail Shopping</option>
<option value="15">Travel & Lodging</option>
</select>
<select name="type" id="ctlPerson"></select>
</div>
</div>
<script>
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
$('#ctlPerson').html('<option value="123">ascd</option>');
});
});
</script>

Try using append instead:
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
var ctl = $('#ctlPerson').append('<option value="123">'+val+'</option>')[0].options;
ctl.selectedIndex = ctl.length-1;
});
});
http://jsfiddle.net/J69q8/

I think you also need to set the 'selected' property. Add
$('#ctlPerson option[value="123"]').attr('selected', 'selected');
to the end of the script. You are currently adding the option to the select list, but are not changing the select list to show it.

<div id="test">
<select name="sel" id="sel">
<option name="1" id="1" value="1">Automotive</option>
<option name="2" id="1 value="2">Business 2 Business</option>
<option name="3" id="1 value="3">Computers</option>
</select>
<select name="sel2" id="sel2"></select>
</div>
<script>
$("#sel").change(function() {
var val = $(this).val();
$('#sel2').html('<option value="1">NEW</option>');
)};
</script>
this works fine for what you need to do.
it's something like what you have