JsFiddle : https://jsfiddle.net/69z2wepo/9956/
I am returning a select element in the render function in my react.js code.
But whenever I change the select value, the function in the onChange is not getting triggered.
var Hello = React.createClass({
render: function() {
return <select id="data-type" onChange={changeDataType()}>
<option selected="selected" value="user" data-type="enum">User</option>
<option value="HQ center" data-type="text">HQ Center</option>
<option value="business unit" data-type="boolean">Business Unit</option>
<option value="note" data-type="date">Try on </option>
<option value="con" data-type="number">Con</option>
</select>
}
});
React.render(<Hello/>, document.getElementById('container'));
function changeDataType() {
console.log("entered");
}
This function is getting triggered only once when the select is loaded and subsequently when I change the value, its not getting triggered.
onChange takes a function.
You are passing it changeDataType(), which is running the function changeDataType function, and setting onChange to it's return value, which is null.
Try passing the actual function, instead of evaluating the function.
<select id="data-type" onChange={changeDataType}>
Functions that trigger when a component changes should really be defined inside the component itself.
I recommend defining your function inside of your Hello component, and passing this.changeDataType to your onChange attribute, like so:
var Hello = React.createClass({
changeDataType: function() {
console.log('entered');
},
render: function() {
return <select id="data-type" onChange={this.changeDataType}>
<option selected="selected" value="user" data-type="enum">User</option>
<option value="HQ center" data-type="text">HQ Center</option>
<option value="business unit" data-type="boolean">Business Unit</option>
<option value="note" data-type="date">Try on </option>
<option value="con" data-type="number">Con</option>
</select>
}
});
Here is an updated JSFiddle that produces your expected behavior: https://jsfiddle.net/69z2wepo/9958/
Try this
<select id="data-type" onChange={()=>changeDataType()}>
Related
I have my home.html as
<select name="PublicWords">
<option value="">All</option>
<option value="">Draft</option>
<option value="">Approved</option>
<option value="">Approved ZWNJ</option>
<option value="">Rejected</option>
</select>
I would like to perform some action on change in this select tag in my django project
How can i perform this action?
Add an onchange event handler on the html element. (Note: I have changed Name to id.)
<select onchange="foo()" id="PublicWords">
<option value="">All</option>
<option value="">Draft</option>
<option value="">Approved</option>
<option value="">Approved ZWNJ</option>
<option value="">Rejected</option>
</select>
Then also include the function call in javascript.
<script type="text/javascript">
function foo() {
// function body here
// for example
d = document.getElementById("PublicWords").value;
alert(d);
}
</script>
Ensure that you have a value assigned to the particular option that closely relates to the option text.
I am creating a webapp using vuejs 2.0. I have created simple select input using following code:
<select v-model="age">
<option value="" disabled selected hidden>Select Age</option>
<option value="1"> 1 Year</option>
<option value="11"> 11 Year</option>
</select>
and I have this in data of my Vue component:
data () {
return {
age: "",
}
},
watch: {
age: function (newAge) {
console.log("log here")
}
But I start to get this error when adding default value for select:
ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-5cf0d7e0!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/cde.vue
template syntax error :
inline selected attributes on will be ignored when using v-model. Declare initial values in the component's data option instead.
# ./src/components/cde.vue 10:23-151
# ./~/babel-loader!./~/vue-loader/lib/selector.js?
type=script&index=0!./src/views/abcView.vue
# ./src/views/abcView.vue
# ./src/router/index.js
# ./src/app.js
# ./src/client-entry.js
# multi app
I tried to give default value in the data section of the component as well, but then nothing happened. I tried v-bind also but then watchers stopped working on age variable.
For others who may be landing on this question, there was an additional step for me to get the default option to appear. In my case, the v-model I was binding to was returning null and rather than an empty string. This meant that the default option was never selected once Vue bindings kicked in.
To solve for this, simple bind the value property of your default option to null:
<select v-model="age">
<option :value="null" disabled>Select Age</option>
...
</select>
http://jsfiddle.net/2Logme0m/1/
The only thing needed to work this was remove selected from default option:
<select v-model="age">
<option value="" disabled hidden>Select Age</option>
.....
</select>
For placeholder, you need to set the value attribute with the same value as in defined as initial value in your state.
Change your disabled option with
<option value="null" disabled selected hidden>Select Age</option>
and in state do something like this
data () {enter code here
return {
age: null,
}
}
To build upon Shivam Bisht, In case you can't access your default value.
Just add value="undefined" to your placeholder option tag.
Placeholder text
var demo = new Vue({
el: '#demo',
data: function() {
return {
param: undefined,
};
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<select v-model="param">
<option value="undefined" disabled>Placeholder text</option>
<option value="1">Dutch woman are beautiful.</option>
<option value="11">German Men are slow.</option>
</select>
</div>
The only way I got it working:
<select v-model="selectedTemplate" class="btn btn-default">
<option v-for="template in templates" v-bind:value="template.tasks"}{{template.name}}</option>
<option :value="this.selectedTemplate" disabled hidden>Select a template</option>
</select>
The key being the :value=this.selectedtemplate in the disabled hidden option.
To add up on other answers, as they all seem to be correct at a specific condition:
It depends on the data type expected by your v-model variable, for example if it is expecting an integer passing :value="null" or :value="undefined" would work, but if it is expecting an object for example, then you need to pass :value="{}".
//Example: data/v-model expects integer
<select v-model="param">
<option :value="undefined" disabled>Placeholder text</option>
<option value="1">1</option>
<option value="11">11</option>
</select>
//Example: data/v-model expects object
<select v-model="param">
<option :value="{}" disabled>Placeholder text</option>
<option
v-for="item in items"
:key="item.id"
:value="item"
>
{{ item.propery }}
</option>
</select>
For a string null or undefined values should work, but you could also just define a placeholder in you data object.
I have a drop down list, which is within a pop modal. The drop-down list looks like this:
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
And my jquery looks like this:
$("body").on("change", "#ddlEventType", function (e) {
var test = $('#ddlEventType').val();
});
It hits the onchange function no problem, but whenever I select an option on the ddl, the test variable is always "", never gets the value. Can anyone help me with what's going wrong here? Is it because the ddl is inside a modal popup? I actually have a ddl in a different modal popup, with the exact same code and it works completely as it should. There's no conflicting ids on the age either. Can't figure out why I'm not getting the value.
UPDATE
I gave the ddl a class name of ddlEventType, and changed the jquery to
$("body").on("change", "#ddlEventType", function (e) {
var test = $('.ddlEventType').val();
});
and for some reason this worked. Don't get why, but it works and that's all I need. Thanks for your help everyone.
Try this:
$(document).on('change','#ddlEventType',function(){
console.log($(this).val());
});
Are you doing any change to the body. And for preventDefault it should be e.preventDefault();
You can follow the below methods for obtaining the selected value from the select tag using the onchange() attribute.
First method i have called the onchange() directly to the script function.
Second Method i have given directly a function to the select tag and then called the function in the script file.
First Method:
$(document).ready(function(){
$("#ddlEventType").change(function(){
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
Second Method:
function get_value(a)
{
alert(a);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType" onchange="get_value(this.value)">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
I have created a custom Select in react. Whenever I try to select a value from the options it reflects old value only e.g I selected 4 from the dropdown handleChange functions will get the value 1 from e.target.value but the dropdown box will show the changed value '4'.
module.exports = React.createClass({
getInitialState:function(){
return {selectValue:'1'};
},
handleChange:function(e){
this.setState({selectValue:e.target.value});
this.props.callbackParent(this.state.selectValue);
},
render: function() {
return (
<div>
<select value={this.state.selectValue}
onChange={this.handleChange} >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
);
}
});
You are trying get value(selectValue) from state(this.state) whereas it is not completed, in this case you can use callback as a second argument in setState, like this
handleChange: function(e) {
this.setState({selectValue:e.target.value}, function () {
this.props.callbackParent(this.state.selectValue);
});
}
Example
The second (optional) parameter is a callback function that will be
executed once setState is completed and the component is re-rendered.
This works correctly except the type error for props.callbackParent:
https://jsfiddle.net/reactjs/69z2wepo/
HTML:
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
JS:
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
I have a dropdownlist which is declared like this:
<select class="ddl" onchange="reloadValues(this)">
options...
</select>
There is another dropdownlist which is identical
<select class="ddl" onchange="reloadValues(this)">
options...
</select>
When I change the first dropdownlist the reloadValues function is fired. How can I also fire the reloadValues of the second dropdownlist.
If you use jquery, you can do it like so
$(document).ready(function() {
$(".ddl").change(function(ev) {
var that = this;
reloadValues(that);
$(".ddl").each(function(item, index) {
if(this !== that)
reloadValues(this);
});
});
});
Without jquery
function reloadValues(that)
{
var ddl=document.getElementsByTagName('select')
for(i=0;i<ddl.length;i++)
{
if(ddl[i].className=='ddl')
{
if(that==ddl[i])
{
alert("This element triggered the event and contains "+ddl[i].length+" items!");
}
else
{
// Do something
alert("This element didn't trigger the event and contains "+ddl[i].length+" items!");
}
}
}
}
Here is a fiddle.
Unfortunately you cannot compare the actual functions as the onevent function is unique per element.
It would look something like
function onchange()
{
reloadValues(this)
}
It would be super elegant if we could loop through all selects and compare the reloadValues function inside the unique per element onchange function to see if it's the same function or not.
But a separate function would be assigned to each element, so they cannot be directly compared. You could compare the string values by element1.onchange+'' == element2.onchange+'' but you may get unexpected results in some browsers, as they will format the string value differently sometimes.
Here is an example that works by checking the string value of the attribute. E.g. it performs the same routine on all elements that have the value reloadValues(this) set to their onchange attribute.
In this example, changing the index of one select changes any select on the page to the same index so long as it has the reloadValues(this) text exactly in its onchange attribute. In this example, it doesn't matter what the id or class attributes are of the selects.
However, tagging or changing the text value of the onchange attribute will affect it.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script language="javascript" type="text/javascript">
function reloadValues( XXX ) {
var allSelects = document.body.getElementsByTagName("select");
for( var i = 0; i < allSelects.length; i++) {
if(allSelects[i].attributes["onchange"].value == "reloadValues(this)") {
allSelects[i].selectedIndex = XXX.options.selectedIndex;
}
}
}
</script>
<body>
<select class="ddl" onchange="reloadValues(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="fsfsfs" onchange="reloadValues(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="ddl" onchange="reloadValues(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="ddl" onchange="reloadValues(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>