We Keep Coding

Get custom attribute value from select

I'm trying to clone a select options into another select. At the moment I'm able to do it but now the original option contains a custom attribute. So my question is how can I access to the custom attribute? This is what I have for now:
var options = $('#sel1 option');
var arrayOptions = [];
for (var i = 0; i < options.length; i++) {
var id = parseInt($(options[i]).val(), 10);
var text = $(options[i]).text() || '[select a type]';
arrayOptions.push('<option value="' + id + ' data-custom="' + options[i]["data-custom"] + '">' + text + '</option>');
}
console.log(arrayOptions);
<select id="sel1">
<option value="1" data-custom="abc1">Hello 1</option>
<option value="2" data-custom="abc2">Hello 2</option>
<option value="3" data-custom="abc3">Hello 3</option>
</select>
Right now options[i]["data-custom"] is setting undefined instead of abc1, abc2, etc.
Here is a fiddle.

You can use dataset.custom
var options = $('#sel1 option');
var arrayOptions = [];
for (var i = 0; i < options.length; i++) {
var id = parseInt($(options[i]).val(), 10);
var text = $(options[i]).text() || '[select a type]';
arrayOptions.push('<option value="' + id + ' data-custom="' + options[i].dataset.custom + '">' + text + '</option>');
}
$('#result').text(arrayOptions.join("\n"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel1">
<option value="1" data-custom="abc1">Hello 1</option>
<option value="2" data-custom="abc2">Hello 2</option>
<option value="3" data-custom="abc3">Hello 3</option>
</select>
<pre id="result"></pre>

this way
const arrayOptions =
[...document.querySelectorAll('#sel1 option')]
.map( opt => `<option value="${opt.id}" `
+ `data-custom"${opt.dataset.custom}">`
+ `${opt.textContent}"</option>`
)
console.log(arrayOptions);
<select id="sel1">
<option value="1" data-custom="abc1">Hello 1</option>
<option value="2" data-custom="abc2">Hello 2</option>
<option value="3" data-custom="abc3">Hello 3</option>
</select>

How to display in javascript only the current selected data from HTML select box?

The following code displays results data from the table according to the choice from HTML select box, but it appends the new results to the previous one. How to display only the current selected data?
<script>
function GetSelectedText() {
const trips = [
["AAA", "London"],
["AAA", "Manchester"],
["AAA", "Oxford"],
["BBB", "Paris"],
["BBB", "Lyon"],
["BBB", "Marsylia"],
["CCC", "Berlin"],
["CCC", "Hamburg"],
["CCC", "Bonn"]
]
var oSel = document.getElementById("country");
var wybrano = oSel.options[oSel.selectedIndex].text;
var parent = document.getElementById("wybrano");
for (var i = 0; i < 9; i++) {
if (wybrano == trips[i][0]) {
divy = document.createElement("div");
divy.innerHTML = '<p>' + i + ' ' + trips[i][1] + '</p>';
document.body.appendChild(divy);
}
}
}
</script>
<form id="Forma">
<select id="country" onChange="GetSelectedText()">
<option value="0"> country </option>
<option value="1"> AAA </option>
<option value="2"> BBB </option>
<option value="3"> CCC </option>
</select>
</form>
<div id="content"></div>

In your code, you didn't append the results to content div, but you append it to body instead. It's better to wrap all the result in a div. On every OnChange event, simply reset the html/clear the div.
<script>
function GetSelectedText() {
const trips = [
["AAA","London"],["AAA","Manchester"],["AAA","Oxford"],
["BBB","Paris"] ,["BBB","Lyon"] ,["BBB","Marsylia"],
["CCC","Berlin"],["CCC","Hamburg"] ,["CCC","Bonn"]
]
var oSel = document.getElementById("country");
var wybrano = oSel.options[oSel.selectedIndex].text;
var content = document.getElementById('content');
//Remove Previous Content
//const myNode = content;
//while (myNode.firstChild) {
// myNode.removeChild( myNode.lastChild );
//}
//while (myNode.lastElementChild) {
// myNode.removeChild(myNode.lastElementChild);
//}
//Or Simply
content.innerHTML = "";
for (var i=0; i < 9; i++) {
if ( wybrano == trips[i][0]) {
divy = document.createElement("div");
divy.innerHTML = '<p>'+i+' '+trips[i][1]+'</p>';
content.appendChild( divy );
}
}
}
</script>
<form id="Forma">
<select id="country" onChange="GetSelectedText()">
<option value="0"> country </option>
<option value="1"> AAA </option>
<option value="2"> BBB </option>
<option value="3"> CCC </option>
</select>
</form>
<div id="content">
</div>

Here is another slightly different approach. I pre-process the trips array first into an object that will then return bits of HTML to be joined and put into the content.innerHTML:
const trips = [
["AAA","London"],["AAA","Manchester"],["AAA","Oxford"],
["BBB","Paris"] ,["BBB","Lyon"] ,["BBB","Marsylia"],
["CCC","Berlin"],["CCC","Hamburg"] ,["CCC","Bonn"]
].reduce((a,[k,t],i)=>((a[k]=a[k]||[]).push("<p>"+i+" "+t+"</p>"),a),{}),
oSel = document.getElementById("country"),
content=document.getElementById("content");
function GetSelectedText() {
content.innerHTML = (trips[oSel.options[oSel.selectedIndex].text] ?? ["no selection made"]).join("");
}
<form id="Forma">
<select id="country" onChange="GetSelectedText()">
<option value="0"> country </option>
<option value="1"> AAA </option>
<option value="2"> BBB </option>
<option value="3"> CCC </option>
</select>
</form>
<div id="content">
</div>

I. tried to clear the results of the previous selections by inneHTML and/or removing the child element with the folowing code before the for loop ie. for (var i=0; i < 9; i++) responsible for the display (but not succeded yet) :
document.getElementById("content").innerHTML = "";
const myNode = document.getElementById("content");
while (myNode.firstChild) {
myNode.removeChild( myNode.lastChild );
}
while (myNode.lastElementChild) {
myNode.removeChild(myNode.lastElementChild);
}

How to add value into option using javascript

Here is my code for js
function addTag(tag) {
var tags = document.getElementById("tags");
var span = document.createElement("span");
span.textContent = tag.value;
tag.value = "";
span.setAttribute("onclick", "this.remove()");
tags.append(span);
}
function addOption() {
var x = document.getElementById("tag");
var option = document.createElement("option");
option.textContent = tags.textContent;
x.add(option);
}
Once the user click on the tags it will close can should display the value to the option but, I only manage to create a blank space inside the option.
Here is related JS Fiddle

Changed tags span to contain all option spans.
Then made each span inside tags responsible to add itself back to select and remove itself from tags span.
Please see the changes in the code as per above logic.
function addTag(tag) {
var tags = document.getElementById("tags");
var span = document.createElement("span");
span.textContent = tag.value;
tag.value = ""; //clear the field when choose or pressed enter key
span.style.backgroundColor = "#E5E6E7";
span.style.margin = " 5px";
span.style.padding = "5px";
//span will add itself back to select and remove itself from tags
span.setAttribute("onclick", "addOption(this)");
if (span.textContent == "Fast Food") {
$('option[value="Fast Food"]').remove();
} else if (span.textContent == "Vegan") {
$('option[value="Vegan"]').remove();
} else {
$('option[value="Food"]').remove();
}
tags.append(span);
}
function addOption(span) {
var x = document.getElementById("tag");
var option = document.createElement("option");
option.textContent = span.textContent;
x.add(option);
span.remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3">
<div class="form-group">
<label class="control-label">Food Type</label><br>
<span id="tags"></span>
<select id="tag" onchange="addTag(this)" class="form-control">
<option value="">-All-</option>
<option value="Fast Food">Fast Food</option>
<option value="Vegan">Vegan</option>
<option value="Food">Food</option>
</select>
</div>
</div>

Since you're using jQuery, we can make use of the event system. This makes for cleaner code.
The main issue with your code is that you were trying to get textContent of tags which *doesn't exist as a variable. Instead it will reference the id="tags" element.
textContent only returns the text value of that element, not its children. In this case it is empty.
// here we use jQuery's event system to define what happens
// for the events below
$(document)
.on("click", ".tag", function(){
removeTag(this);
})
.on("change", "#tag", function(){
addTag(this);
});
function removeTag(tag){
addOption(tag.textContent);
tag.remove();
}
function addTag(tag) {
var tags = document.getElementById("tags"),
span = document.createElement("span");
span.textContent = tag.value;
tag.value = ""; //clear the field when choose or pressed enter key
// could you add the following styles as a class?
span.style.backgroundColor = "#E5E6E7";
span.style.margin = "5px";
span.style.padding = "5px";
span.className = "tag";
// no need to set `onclick` here as we're handling at the top of this code
// we can use the text to find the element
// instead of a repeating if else statment
$('option[value="' + span.textContent + '"]').remove();
tags.append(span);
}
function addOption(text) {
var x = document.getElementById("tag"),
option = document.createElement("option");
option.textContent = text;
// we also need to set the value here
// since we're looking for it in `addTag`
option.value = text
x.add(option);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3">
<div class="form-group">
<label class="control-label">Food Type</label><br>
<span id="tags"></span>
<select id="tag" class="form-control">
<option value="">-All-</option>
<option value="Fast Food">Fast Food</option>
<option value="Vegan">Vegan</option>
<option value="Food">Food</option>
</select>
</div>
</div>
ES6 and improvements
$(document)
.on("click", ".tag", (event) => removeTag(event.currentTarget))
.on("change", "#tag", (event) => addTag(event.currentTarget));
function removeTag(tag){
addOption(tag.textContent);
tag.remove();
}
function addTag(tag) {
let tags = $("#tags"),
span = $('<span class="tag" />');
span.text(tag.value);
tag.value = ""; //clear the field when choose or pressed enter key
// we can use the text to find the element
// instead of a repeating if else statment
$(`option[value="${span[0].textContent}"]`).remove();
tags.append(span);
}
function addOption(text) {
let x = $("#tag"),
option = $('<option />');
option
.text(text)
.val(text);
x.append(option);
}
.tag {
background-color: #E5E6E7;
margin: 5px;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3">
<div class="form-group">
<label class="control-label">Food Type</label><br>
<span id="tags"></span>
<select id="tag" class="form-control">
<option value="">-All-</option>
<option value="Fast Food">Fast Food</option>
<option value="Vegan">Vegan</option>
<option value="Food">Food</option>
</select>
</div>
</div>

You had made some logical mistakes,
You can update the fiddle as follows:
function addTag(tag) {
var tags = document.getElementById("tags");
var span = document.createElement("span");
span.textContent = tag.value;
span.setAttribute("onclick", "removeTag(this);");
tag.options[tag.selectedIndex].remove();
tags.append(span);
}
function removeTag(elm) {
elm.remove();
var x = document.getElementById("tag");
var option = document.createElement("option");
option.textContent = elm.textContent;
x.add(option);
}
#tags span{
background-color: #E5E6E7;
margin:5px;
padding:5px;
cursor: pointer;
}
<div class="col-sm-3">
<div class="form-group">
<label class="control-label">Food Type</label><br>
<span id="tags"></span>
<select id="tag" onchange="addTag(this)" class="form-control">
<option value="">-All-</option>
<option value="Fast Food">Fast Food</option>
<option value="Vegan">Vegan</option>
<option value="Food">Food</option>
</select>
</div>
</div>

adding and removing text to a span populated from a dropdown

Here is my jsfiddle:
The end result I am wanting is that once you make a selection from each dropdown, the selection appears in the first line of text, and then get's reversed in the 2nd line of text. However, the apostrophe S needs to remain in the first spot. So for example, if you selected "Mother" from the first dropdown, and "Father" from the 2nd drop down, the two lines of text should look like this:
My Mother's Father
My Father's Mother
I don't know how to swap the apostrophe S so that it remains so that it comes first.
I tried using:
document.getElementById('third').innerHTML = strUser2 + "'s";
but that causes the apostrophe s to appear before I have anything selected.

That's because to run two functions before selecting. Remove them and try.
function functionOne() {
var e = document.getElementById("dropdown_1");
var strUser = e.options[e.selectedIndex].value;
document.getElementById('first').innerHTML = strUser;
document.getElementById('fourth').innerHTML = strUser.replace("'s", '');
}
document.getElementById("dropdown_1").onchange = functionOne;
function functionTwo() {
var e = document.getElementById("dropdown_2");
var strUser = e.options[e.selectedIndex].value;
var strUser2 = e.options[e.selectedIndex].value;
document.getElementById('second').innerHTML = strUser;
document.getElementById('third').innerHTML = strUser2+ "'s";
}
document.getElementById("dropdown_2").onchange = functionTwo;
span#first,
span#second,
span#third,
span#fourth {
min-width: 40px;
display: inline-block;
border-bottom: solid 1px;
height: 18px;
vertical-align: bottom;
}
<select class="text_select" id="dropdown_1" name="dropdown_1">
<option value="">- Select -</option>
<option value="Father's">Father's</option>
<option value="Mother's">Mother's</option>
<option value="Sister's">Sister's</option>
<option value="Brother's">Brother's</option>
</select>
<select class="text_select" id="dropdown_2" name="dropdown_2">
<option value="">- Select -</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Sister">Sister</option>
<option value="Brother">Brother</option>
</select>
<br /><br />
<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
<br />
<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>

I would change the values in the option tags, but keep the display the same. Ex: <option value="Father">Father's</option>
Then append 's after the values you want to have 's.
Also don't execute each function by default, only execute them onchange. That way you'll never get something like 's when the page loads.
I would then make sure - Select - is the first option (selected) for both option tags, but make them disabled so the user cannot choose those as options.
--note--
I would strongly recommend using textContent as supposed to innerHTML to avoid possible code injection, depending on what you're using this for.
function functionOne(){
var e = document.getElementById("dropdown_1");
var strUser = e.options[e.selectedIndex].value;
document.getElementById('first').textContent = strUser + "'s";
document.getElementById('fourth').textContent = strUser;
}
document.getElementById("dropdown_1").onchange = functionOne;
function functionTwo(){
var e = document.getElementById("dropdown_2");
var strUser = e.options[e.selectedIndex].value;
var strUser2 = e.options[e.selectedIndex].value;
document.getElementById('second').textContent = strUser;
document.getElementById('third').textContent = strUser2 + "'s";
}
document.getElementById("dropdown_2").onchange = functionTwo;
span#first, span#second, span#third, span#fourth{
min-width:40px;
display:inline-block;
border-bottom:solid 1px;
height:18px;
vertical-align:bottom;
}
<select class="text_select" id="dropdown_1" name="dropdown_1">
<option value="" disabled selected>- Select -</option>
<option value="Father">Father's</option>
<option value="Mother">Mother's</option>
<option value="Sister">Sister's</option>
<option value="Brother">Brother's</option>
</select>
<select class="text_select" id="dropdown_2" name="dropdown_2">
<option value="" disabled selected>- Select -</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Sister">Sister</option>
<option value="Brother">Brother</option>
</select>
<br /><br />
<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
<br />
<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>

Simple solution:
Remove the apostrophe's from the list values and add on the string only if defined:
document.getElementById('first').innerHTML = strUser+(strUser ? "'s" : "");
document.getElementById('third').innerHTML = strUser2+(strUser2 ? "'s" : "");
Fiddle here
EDIT - New solution:
Full code solution keeping the 2 lines from populating until both dropdowns are selected, as requested:
var firstSelect = false;
var secondSelect = false;
var dd1 = document.getElementById("dropdown_1");
var dd2 = document.getElementById("dropdown_2");
function clearAllContainers(){
document.getElementById('first').innerHTML = '';
document.getElementById('second').innerHTML = '';
document.getElementById('third').innerHTML = '';
document.getElementById('fourth').innerHTML = '';
}
function updateAllContainers(){
var strUser = dd1.options[dd1.selectedIndex].value;
document.getElementById('first').innerHTML = strUser+(strUser ? "'s" : "");
document.getElementById('fourth').innerHTML = strUser;
var strUser2 = dd2.options[dd2.selectedIndex].value;
document.getElementById('second').innerHTML = strUser2;
document.getElementById('third').innerHTML = strUser2+(strUser2 ? "'s" : "");
}
function functionOne(){
if(dd1.options[dd1.selectedIndex].value){
firstSelect = true;
}else{
firstSelect = false;
}
if(secondSelect && dd1.options[dd1.selectedIndex].value != ''){
updateAllContainers();
}else{
clearAllContainers();
}
}
functionOne()
document.getElementById("dropdown_1").onchange = functionOne;
function functionTwo(){
if(dd2.options[dd2.selectedIndex].value){
secondSelect = true;
}else{
secondSelect = false;
}
if(firstSelect && dd2.options[dd2.selectedIndex].value != ''){
updateAllContainers();
}else{
clearAllContainers();
}
}
functionTwo()
document.getElementById("dropdown_2").onchange = functionTwo;
<select class="text_select" id="dropdown_1" name="dropdown_1">
<option value="">- Select -</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Sister">Sister</option>
<option value="Brother">Brother</option>
</select>
<select class="text_select" id="dropdown_2" name="dropdown_2">
<option value="">- Select -</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Sister">Sister</option>
<option value="Brother">Brother</option>
</select>
<br /><br />
<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
<br />
<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>
Updated fiddle for final solution is here.

I looked at your Javascript file on JSFiddle. The solution is very simple. First you'll have to remove apostrophe s from the content of <span id="fourth"></span>
You can do that easily by slicing off last two characters from the content of that span. Here is how you need to do it.
document.getElementById('fourth').innerHTML = strUser.slice(0, strUser.length - 2);
Now, the next part is to add apostrophe s in the content of <span id="third"></span>.
But you'll have to make sure that if the content of the span is empty then it should not append apostrophe s.
For that you can check whether on not the content is empty and if not empty then you can append apostrophe s.
Here is how you can do it.
document.getElementById('third').innerHTML = (strUser)? strUser + '\'s':strUser;
Here is the overall modified code of your Javascript file.
function functionOne(){
var e = document.getElementById("dropdown_1");
var strUser = e.options[e.selectedIndex].value;
document.getElementById('first').innerHTML = strUser;
document.getElementById('fourth').innerHTML = strUser.slice(0, strUser.length - 2);
}
functionOne();
document.getElementById("dropdown_1").onchange = functionOne;
function functionTwo(){
var e = document.getElementById("dropdown_2");
var strUser = e.options[e.selectedIndex].value;
//var strUser2 = e.options[e.selectedIndex].value;
document.getElementById('second').innerHTML = strUser;
document.getElementById('third').innerHTML = (strUser)? strUser + '\'s':strUser;
}
functionTwo()
document.getElementById("dropdown_2").onchange = functionTwo;

Jquery on change event is not firing when selecting the same drop down option

Hi I have a drop down like this and I have a textarea field . I want when ever uses a option from the dropdown the dropdown selected value will append in the text area field and I have used change event for the dropdown but the problem with it is that when I am selecting the same value again then the change event is not firing. I have searched and many people suggest to use click event of dropdown but when I am using the click event then the test I am selecting is appearing two times but I want only the selected text of the dropdown to be appear.My JS code is like this.
<select class="form-control" id="drpLinkType">
<option value="2" selected="selected">Post</option>
<option value="2">Pre</option>
<option value="2">Test</option>
</select>
$('#drpLinkType').click(function () {
debugger;
var $txt = $("#txt");
var caretPos = $txt[0].selectionStart;
var textAreaTxt = $txt.val();
var txtToAdd = $('#drpLinkType :selected').text();
$txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));
})
jsfiddle.net/w0c9o7ox create the js fiddle. Here you can see that if I click the same option for then it is not working

Set .value of <select> to empty string "" using this.value = "" or $(this).val("") at last line of change event, else if same <option> is selected in succession the .value has not changed.
You can also include <label> element with for attribute set to <select> .id value to set current .textContent of selected <option>.
$('#drpLinkType').on('change', function () {
//debugger;
var $txt = $("#txt");
var caretPos = $txt[0].selectionStart;
var textAreaTxt = $txt.val();
var txtToAdd = $('#drpLinkType :selected').text();
$txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));
this.labels[0].innerHTML = this.selectedOptions[0].textContent;
$('#drpLinkType').val("");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="drpLinkType">
<option value="0">Please select a option</option>
<option value="2">Post</option>
<option value="2">Pre</option>
<option value="2">Test</option>
</select><label for="drpLinkType"></label>
<textarea id="txt" rows="15" cols="70" placeholder="Enter text ..." ></textarea>

Use click even instead. Like so (I moved the appending of the text into a separate function for clarity):
$('#drpLinkType').on('click', function (event) {
var text = $('#drpLinkType :selected').text();
appendText(text);
});
function appendText(text) {
var $txt = $('#txt');
var caretPos = $txt[0].selectionStart;
var textAreaTxt = $txt.val();
$txt.val(textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="drpLinkType">
<option value="0">Please select a option</option>
<option value="2" >Post</option>
<option value="2">Pre</option>
<option value="2">Test</option>
</select>
<textarea id="txt" rows="15" cols="70" placeholder="Enter text ..." ></textarea>
But, if you have control over the HTML, this would be optimal:
$('#drpLinkType').on('click', function (event) {
appendText(event.target.value);
});
function appendText(text) {
var $txt = $('#txt');
var caretPos = $txt[0].selectionStart;
var textAreaTxt = $txt.val();
$txt.val(textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="drpLinkType">
<option value="">Please select a option</option>
<option value="Post" >Post</option>
<option value="Pre">Pre</option>
<option value="Test">Test</option>
</select>
<textarea id="txt" rows="15" cols="70" placeholder="Enter text ..." ></textarea>