I have a styled-select dropdown menu, and I created it's own .css and .js.
This is what happens when I use only one dropdown menu in a page, which works fine as expected:
jsFiddle OK
Instead when I use two dropdown menu it's a mess, and it's normal, because my .js file will do it's functions to all those dropdown menu which exists on the page. This is how it appears when I use two dropdown menu with the same .js and .css files:
jsFiddle NOT OK
Now my questions is how can I use the same .js and .css files for multiple dropdown's which all of them act as expected?
$(function () {
$('.styled-select select').hide();
$("select#elem").val('2');
$('.styled-select div').html($('.styled-select select option:selected').text());
$('.styled-select div').click(function () {
$('.styled-select select').show();
$('.styled-select select').attr('size', 5);
$('.styled-select select').focus();
});
$('.styled-select select').click(function () {
$('.styled-select div').html($('.styled-select select option:selected').text());
$('.styled-select select').hide();
});
$('.styled-select select').focusout(function () {
$('.styled-select select').hide();
});
});
.styled-select select {
position: absolute;
background: transparent;
width: 420px;
padding-top: 5px;
font-size: 18px;
font-family: 'PT Sans', sans-serif;
color: black;
border: 0;
border-radius: 4;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
z-index: 1;
outline: none;
left: -7px;
}
.styled-select {
background: url('../img/campaignSelector.png') no-repeat right;
background-color: white;
width: 420px;
height: 42px;
position: relative;
margin: 0 auto;
box-shadow: 0 2px 2px 0 #C2C2C2;
background-position: 97% 50%;
}
.styled-select option {
font-size: 18px;
background-color: white;
margin-left: 3px;
}
::-webkit-scrollbar {
display: none;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div style="width:800px; height: 600px; background: grey;">
<div class="styled-select" style="left:-250px; top:90px; width:200px;">
<div style="font-size:18px; height:42px; position:relative; top:10px; left: 4px;"></div>
<select id="" name="" style="margin:0 0 0 5px; border: none;" onblur="this.size=0; width:200px;" onchange="this.size=0;">
<option value="0">Marco P</option>
<option value="1">Marco F</option>
<option value="2">Daniele</option>
<option value="3">Cristina</option>
<option value="4">Angine</option>
</select>
</div>
<div class="styled-select" style=" width:200px; left:50px; top:48px;">
<div style="font-size:18px; height:42px; position:relative; top:10px; left: 4px;"></div>
<select id="" name="" style="margin:0 0 0 5px; border: none;" onblur="this.size=0; width:200px;" onchange="this.size=0;">
<option value="0">ReshaD</option>
<option value="1">Rasheed</option>
<option value="2">Reza</option>
<option value="3">Davin</option>
<option value="4">Ariya</option>
</select>
</div>
</div>
To make your code work for multiple instances of the .styled-select container you need to use $(this) to reference the element which is raising the event and then use closest() to get the nearest parent .style-select. From there you can use find() to get the required element. Try this:
$('.styled-select select').hide();
$("select#elem").val('2');
$('.styled-select div').each(function() {
var $container = $(this).closest('.styled-select');
$(this).html($container.find('select option:selected').text());
});
$('.styled-select div').click(function() {
var $container = $(this).closest('.styled-select');
$container.find('select').show().attr('size', 5).focus();
});
$('.styled-select select').click(function() {
var $container = $(this).closest('.styled-select');
var text = $container.find('select option:selected').text();
$container.find('div').html(text);
$container.find('select').hide();
});
$('.styled-select select').focusout(function() {
var $container = $(this).closest('.styled-select');
$container.find('select').hide();
});
Updated fiddle
Related
$('#seltags').change(function() {
var obj = $('#' + $(this).val());
$('.txtags').hide();
obj.show();
});
.seltags {
display: block;
padding: 1px 7px;
width: 100%;
}
.txtags {
display: block;
width: 100%;
padding: 5px 9px;
outline: none;
border: 1px solid #999;
border-radius: 9px;
resize: none;
overflow-y: scroll;
margin-top: 13px;
text-transform: uppercase;
}
.tagsimg {
display: none;
}
.divbottom {
height: 14px;
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
divbottom gets a top margin (about five pixels) when seltags is changed to second option, and lose that margin when it is returned to the first option.
Can anyone help me what's wrong here?
Thank you.
The margin appears because when the select box is changed and the second option is chosen, the text area that was hidden now gets display: inline-block; to show it, and the offset from being hidden causes the margin jump.
Try adding vertical-align: middle; to the styles of the .txtags class element.
$('#seltags').change(function() {
var obj = $('#' + $(this).val());
$('.txtags').hide();
obj.show();
});
.seltags {
display: inline-block;
padding: 1px 7px;
width: 100%;
}
.txtags {
display: inline-block;
width: 100%;
padding: 5px 9px;
outline: none;
border: 1px solid #999;
border-radius: 9px;
resize: none;
overflow-y: scroll;
margin-top: 13px;
text-transform: uppercase;
vertical-align: middle;
}
.tagsimg {
display: none;
}
.divbottom {
height: 14px;
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
The margin appears because when the second option is chosen, the #tagsimg element gets display: inline-block inline style.
In order to remove this margin, you need to add vertical-align: middle to the styles of the #tagsimg element or find out why the display: inline-block is added and change that.
You can read why jQuery does it, and how to avoid it in this StackOverflow question: jQuery .show() adds style="display:inline-block" to elements
it's not a margin, it's the textarea ( .txtags ) that you show and hide that pushes it down a bit necause when shown it gets display:inline-block ,
add .obj.show().css({'display': 'block'}); so both textareas behave the same
$('#seltags').change(function(){
var obj = $('#' + $(this).val());
$('.txtags').hide();
obj.show().css({'display': 'block'});
});
.seltags{
display:block;
padding:1px 7px;
width:100%;
}
.txtags{
display:block;
width:100%;
padding:5px 9px;
outline:none;
border:1px solid #999;
border-radius:9px;
resize:none;
overflow-y:scroll;
margin-top:13px;
text-transform:uppercase;
}
.tagsimg{
display:none;
}
.divbottom{
height:14px;
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
I'm not sure why, but the div.divbottom is not getting any margin or padding at all. The problem is that when you show the .tagsimg it is getting display: inline-block instead of just block which is the initial state of .txtags. Making .tagsimg be hidden by jQuery instead of starting with display:none makes jQuery change it to display:inline-block when shown which fix it.
$('#seltags').change(function(){
var obj = $('#' + $(this).val());
$('.txtags').hide();
obj.show();
});
$('.tagsimg').hide();
.seltags{
display:block;
padding:1px 7px;
width:100%;
}
.txtags{
display:block;
width:100%;
padding:5px 9px;
outline:none;
border:1px solid #999;
border-radius:9px;
resize:none;
overflow-y:scroll;
margin-top:13px;
text-transform:uppercase;
}
.tagsimg{
display:block;
}
.divbottom{
height:14px;
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
both textareas should be either inline-block or block its the mixture of two which is causing the behavior
Your 1st textarea is displayed as a block.
But the trick here is that when you make your 2nd textarea appear, it appears as an inline-block.
I suggest you to use inline-block or delete the property.
Here is a working snippet with some other comments:
// Optimized function
$('#seltags').change(function() {
$('.txtags').hide();
$('#' + $(this).val()).show();
});
.seltags {
display: block;
padding: 1px 7px;
width: 100%;
}
.txtags {
/* display: inline-block; /* Here is what I changed! */
width: 100%;
padding: 5px 9px;
outline: none;
border: 1px solid #999;
border-radius: 9px;
resize: none;
overflow-y: scroll;
margin-top: 13px;
text-transform: uppercase;
}
.hidden { /* Changed name */
display: none;
}
.divbottom {
height: 14px;
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags hidden' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
On a side note, I don't understand why your 2nd textarea appear as inline-block.
Here is an extract of show() documentation:
“The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( "display", "block" ), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.”
(link: http://api.jquery.com/show/)
I have a drop down list like nothing, name1, name2, name3, name4 and etc,... When I select nothing only the alert popup should display where as popup should not display when I select others.
Any ideas?
$(document).ready(function(){
$("#dropdown_change").change(function(){
if(document.getElementById("dropdown_change").value == "nothing"){
alert("nothing");
$("#popup").css("display", "block");
}
});
});
#popup{
position: fixed;
margin:auto;
background: rgba(0,0,0,0.5);
display: none;
top: 0;
left: 0;
bottom:0;
right:0;
width: 300px;
height: 200px;
border: 1px solid #000;
border-radius: 5px;
padding: 5px;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<body>
<form id="myform">
Select a value from the list:
<select id="dropdown_change">
<option value="name1">name1</option>
<option value="nothing" id="open-popup">nothing</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</form>
<div id="popup"> POP UP</div>
</body>
I have a text area within a simple website, where a user can type in what they like. I would like to add a selector(Dropdown box/Combobox) to change the color of all of the text within said text area.
full code
function Text() {
if(document.getElementById("textarea").style.fontWeight != 'bold')
document.getElementById("textarea").style.fontWeight = 'bold';
else
document.getElementById("textarea").style.fontWeight = 'normal';
}
function Text() {
if(document.getElementById("textarea").style.fontStyle != 'italic')
document.getElementById("textarea").style.fontStyle = 'italic';
else
document.getElementById("textarea").style.fontStyle = 'normal';
}
function Text() {
if(document.getElementById("textarea").style.textDecoration != 'underline')
document.getElementById("textarea").style.textDecoration = 'underline';
else
document.getElementById("textarea").style.textDecoration = 'none';
}
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea');
list.style.color=color;
}
body {
padding: 0px;
margin: auto;
display: block;
width: 10px;
height: 7px;
position: center;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 112px;
color: #C0C0C0;
text-align: center;
}
textarea {
width: 90%;
height: 450px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid;
background-color:;
font-size: 16px;
resize: none;
}
#Button {
position: relative;
top: 450px;
left: 50px;
}
#Button {
position: relative;
top: 450px;
left: 70px;
}
#Button {
position: relative;
top: 450px;
left: 90px;
}
select {
position: relative;
top: -302px;
left: 320px;
}
<!doctype html>
<html>
<head>
<title>Simple Word Processor</title>
</head>
<body>
<button id="Button" type="button" onclick="boldText()">Bold</button>
<button id="Button" type="button" onclick="italicText()">Italic</button>
<button id="Button" type="button" onclick="underlineText()">Underline</button>
<form id="form">
<textarea id="textarea">Enter text here...</textarea>
</form>
<select id="colorChanger">
<option value="#000">Black</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
</select>
</body>
</html>
Just set style.color like below.
var list = document.getElementById('textarea');
list.style.color = color;
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea');
list.style.color = color;
}
<textarea id="textarea">Enter text here...</textarea>
<select id="colorChanger">
<option value="black">black</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
getElementById will not return an array
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea1');
list.style.color=color;
}
<textarea id="textarea1">Enter text here...</textarea>
<select id="colorChanger">
<option value="#000">black</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
</select>
Created a fiidle for you here.
Using traditional javascript:
<script type="text/javascript">
function abc(val){
document.getElementById("textarea").style.color=val;
}
</script>
<textarea id="textarea">Enter text here...</textarea>
<select id="colorChanger" onmousedown="this.value='';" onchange="abc(this.value)">
<option value="black">black</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
Updatee:
In yopu code add:
<script>
function changeColor() {
var color = document.getElementById('colorChanger').value;
document.getElementById("textarea").style.color=color;
}</script>
in the header after style tag.
also you not calling function onchange of select tag. add this in select tag.
<select id="colorChanger" onchange="changeColor()">
You combined my previous code with a comment in your question you changed my getElementById to getElementByTagName and it should be getElementsByTagName you missed the s and it will return an array whereas getElementById will return an object
function boldText() {
if(document.getElementById("textarea").style.fontWeight != 'bold')
document.getElementById("textarea").style.fontWeight = 'bold';
else
document.getElementById("textarea").style.fontWeight = 'normal';
}
function italicText() {
if(document.getElementById("textarea").style.fontStyle != 'italic')
document.getElementById("textarea").style.fontStyle = 'italic';
else
document.getElementById("textarea").style.fontStyle = 'normal';
}
function underlineText() {
if(document.getElementById("textarea").style.textDecoration != 'underline')
document.getElementById("textarea").style.textDecoration = 'underline';
else
document.getElementById("textarea").style.textDecoration = 'none';
}
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea');
list.style.color=color;
}
body {
border: 3px solid #C0C0C0 ;
padding: 0px;
margin: auto;
display: block;
width: 1000px;
height: 700px;
position: center;
outline-style: solid;
outline-color: #f8f8f8;
outline-width: 10000px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 112px;
color: #C0C0C0;
position: relative;
top: -220px;
text-align: center;
}
textarea {
width: 90%;
height: 450px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #C0C0C0;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
position: relative;
top: -305px;
left: 50px;
}
#boldButton {
position: relative;
top: 450px;
left: 50px;
}
#italicButton {
position: relative;
top: 450px;
left: 70px;
}
#underlineButton {
position: relative;
top: 450px;
left: 90px;
}
select {
position: relative;
top: -302px;
left: 320px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Word Processor</title>
</head>
<body>
<button id="boldButton" type="button" onclick="boldText()">Bold</button>
<button id="italicButton" type="button" onclick="italicText()">Italic</button>
<button id="underlineButton" type="button" onclick="underlineText()">Underline</button>
<canvas></canvas>
<h1> Word Processor </h1>
<form id="form">
<textarea id="textarea">Enter text here...</textarea>
</form>
<select id="colorChanger">
<option value="#000">Black</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
</select>
</body>
</html>
I am going to add dynamically elements to my block of ul.
I would like to center all list's elements to parent div(brown boder).
For example,
if the resolution of the browser allows you to set two blocks in one row, I would like to center this row in relation to parent div.
I would be very graftefully.
Link to demo
myCode:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var tab = [2,3,4,5,7,8,9,11,12,13,14,15];
$(document).ready(function(){
$('#godziny').on('click', '.godzina', function(){
//alert(this.attr('class'));
$('.yb').removeClass('yb');
$(this).addClass('yb');
});
$('#getElements').click(function() {
for(i = 0; i < tab.length; ++i) {
alert(tab[i]);
setTimeout(function(i){
$('#godziny').append('<li class="godzina">' + tab[i] + '</li>');
}, i*50);
}
});
});
</script>
<style>
#spisSalonow {
margin: 0 auto;
}
#spisSalonow > div {
padding-top: 15px;
color:red;
}
#wybor_terminu {
border: 1px solid brown;
}
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
border: 1px solid red;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
float: left;
cursor: pointer;
margin-right: 40px;
margin-top: 40px;
/*margin:auto;*/
/*
opacity: 0.4;
filter: alpha(opacity=40);
*/
}
.yb {
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="get Elements" id="getElements"/>
<section id="content">
<div class="full">
<BR/>
<div id="wybor_terminu" class="center border" style="width: 70%; position: relative;">
<div style="text-align: center"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-05-24.png" alt="Left Arrow" /> <span id="day"> ANY DAY </span> <img src="http://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-06-24.png" alt="Right Arrow" /></div>
<ul id="godziny" style="margin-top: 25px;">
</ul>
</div>
</section>
</div>
</body>
</html>
You can use the CSS flexbox to achieve this. Here is a link to a complete guide on how to use flexbox. I hope this helps.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add this lines:
CSS
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
/*NEW*/
padding: 0;
width: 100%;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
/*float: left; You don't need this line*/
cursor: pointer;
/*NEW*/
margin:auto;
margin-top: 40px;
}
EDIT
This is only a quick solution with bootstrap maybe it could help you a little bit. jsfiddle
jQuery
In this line I added bootstrap classes:
$('#godziny').append('<li class="godzina col-sm-12 col-md-6">' + tab[i] + '</li>');
This code center your boxes (is not the best solution, but it works):
countBoxes = $('#godziny').width() / 200;
alignBoxes = ($('#godziny').width()-(200*parseInt(countBoxes)))/2;
if(countBoxes >= 2.65){
$('#godziny').css('margin-left', alignBoxes);
} else{
$('#godziny').css('margin-left', 0);
}
If you change the resolution of your screen, click the button to center your boxes again.
I am facing one issue in my html code please check that out below in code:
HTML:
<div class="agent_select_wrap">
<select name="menu-114" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="Select Category" selected="selected">Select Agent Name</option>
<option>Mr. abc</option>
<option>Mr. abc</option>
<option>Mr. abc</option>
</select>
</div>
<div class="agent_select_wrap02">
<div class="my_textarea"></div>
<button>Send</button>
</div>
CSS
.agent_select_wrap { width: 40%; margin: 30px auto 10px auto;}
.agent_select_wrap02 { width: 40%; margin: 0px auto 50px auto;}
.agent_select_wrap select{font-weight:100; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #494949; background: #fff url('../images/selectbox-arrow02.png') right center no-repeat; outline: 0; margin-bottom: 0px; margin: auto; width: 100%; height: 40px; border: 1px solid #ccc; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-appearance: none; /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);*/}
.agent_select_wrap select option { background: #fff; color: #000;}
.my_textarea textarea {font-weight:100; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #494949; width:97.4%; display:block; height: 100px; border: 1px solid #ccc; padding: 6px 0 0 6px; margin: 0; border-radius: 0px; /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);*/}
.my_textarea p{padding: 0; margin: 0; text-align: center; font-size: 12px;font-family: 'Open Sans', sans-serif;}
.agent_select_wrap02 button { display: block; margin: 16px auto 0 auto; padding: 7px 30px; background: #494949; color: #fff; font-weight: 100; font-family: 'Open Sans', sans-serif; font-size: 18px; border: 0;}
.agent_select_wrap02 button:hover {cursor:pointer;}
JS
$(document).on('change', 'select[name=menu-114]', function () {
$("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
$("<p>Please enter your message here..!</p>").appendTo(".my_textarea")
$(function () {
$('select').change(function () {
$that = $(this);
$('textarea').val(function () {
return $(this).prop('defaultValue') + ' ' + $that.val();
});
});
});
});
here is my working example
https://jsfiddle.net/7j623eho/
you just need to change one line of code in javascript code.
$(".my_textarea").html("<textarea> Hello Mr.</textarea><p>Please enter your message here..!</p>");
use above code Instead of yours ..
$("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
$("<p>Please enter your message here..!</p>").appendTo(".my_textarea")
Probably your problem is that you don't remove just created textarea. Try to create it in <div id='temp'> element and then remove this element just before you create new one.
$('#temp').remove();
var container = $('<div id="temp">');
$("<textarea> Hello Mr. </textarea>").appendTo(container);
$("<p>Please enter your message here..!</p>").appendTo(container);
container.appendTo(".my_textarea");
I believe what you want is to create the textarea only once, and let the inline handler to handle further change, so the better way to achieve it is
var onMenuSelected = function () {
$("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
$("<p>Please enter your message here..!</p>").appendTo(".my_textarea")
$(function () {
$('select').change(function () {
$that = $(this);
console.log('Select');
$('textarea').val(function () {
return $(this).prop('defaultValue') + ' ' + $that.val();
});
});
});
// Just unbind self
$(document).off('change', 'select[name=menu-114]', onMenuSelected);
}
$(document).on('change', 'select[name=menu-114]', onMenuSelected);
By define the function, you can directly remove the $(document).on without remove other possible exist handlers. And the select event will only be registered once.
jsFiddle here.
Here we go, use the following code:
HTML
<div class="agent_select_wrap">
<select name="menu-114" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="Select Category" selected="selected">Select Agent Name</option>
<option>Mr. abc</option>
<option>Mr. abc</option>
<option>Mr. abc</option>
</select>
</div>
<div class="agent_select_wrap02">
<div id="my_textarea0">
</div>
<textarea id="my_textarea">
</textarea>
<button>Send</button>
</div>
JS
$(document).on('change', 'select[name=menu-114]', function () {
$("#my_textarea0").html("<textarea> Hello Mr. </textarea>")
$("#my_textarea").html("<p>Please enter your message here..!</p>")
$(function () {
$('select').change(function () {
$that = $(this);
$('textarea').val(function () {
return $(this).prop('defaultValue') + ' ' + $that.val();
});
});
});
});