show hide field based on selected values from dropdown

[Krishna]

can anyone tell me what i am doing wrong here. which ever option i select from dropdown. other os field is disappearing.
<p>Operating System:
    <select name="OS" data-bind="event: otheros() required>
        <option value="">-- Select an Option --</option>
        <option value="Win">Windows</option>
        <option value="ios">iOS</option>
        <option value="otheros">Other</option>
    </select>
</p>
<div id="osother">
    <p>Please Specify:
        <label id="oslabel">
            <input name="Other OS" type="text" placeholder="Other OS" size="50" />
        </label>
    </p>
</div>

otheros: function(value){
if(this.value === 'otheros'){
$('#osother').show();
}else{
$('#osother').hide();}}

[Martin Yankov]

Hi Krishna,

If I understand you correctly, you want to show the #osother div element when the "Other" option is selected from the select control. I have three ideas why your code might not be working.

1. You are missing the closing quotes of the data-bind attribute. You should close the quotes after otheros():

<select name="OS" data-bind="event: otheros() required>

2. If you are using Kendo UI, the correct way to do event binding is with the "events", not the "event" property. You need to also specify which event you want to bind the function to and you should loose the brackets after the function since you are calling a property of the view. For example, this will bind the function to the change event of the select control:

<select name="OS" data-bind="events: { change: otheros}" required>

If you are using some other JS framework, then you should check how to correctly bind the function to the desired event.

3. In the otheros function you have declared the value variable as a parameter. This is incorrect. If you want to bind the function to an event, then you will receive the event object as the function parameter. You can then access the select control by the event.target property. And finally you will need the event.target.value to check it versus the desired value. Here is how the otheros function should look like:

otheros: function(event){
if(event.target.value === 'otheros'){
$('#osother').show();
}else{
$('#osother').hide();}}

Let me know if these suggestions solve your problem. If you continue having troubles with it, please open a support ticket and send us your project, so we can investigate it and provide a solution.

Regards,
Martin Yankov
Telerik