What is the best way to make specific text display after making a selection in a Kendo UI Combo Box?

I have created a dropdown list/combo box using Kendo UI for ASP .NET MVC4.

For each selection I make from the combo box, I want different text to appear underneath. For example, if I choose Option 1, then the text should display "Word 1", and so on.

I believe I need to create a separate div for each text that I want to display, but I am encountering errors in doing so. Can someone provide an example or guide me on how to proceed?

Thank you.

EDIT:

I came across a JavaScript example that demonstrates what I am trying to achieve:

How can I implement the functionality in this example for Kendo UI? You can find the example code here: http://jsfiddle.net/b6ydm/

<script type="text/javascript">
function dropdownTip(value){
console.log(value);
    document.getElementById("result").innerHTML = value;
}</script>

<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px;    margin-top:2px;">
<option selected="selected" value="fruit_search">fruits</option>    
<option value="veggies_search">veggies</option>
<option value="animals_search">animals</option>
<option value="all_search">all</option>

Answer №1

For example

<td>
  @(Html.Kendo().DropDownListFor(model => model.ViewModel.sType)
                      .HtmlAttributes(new {@class = "DropDown"})
                      .DataTextField("Text")
                      .DataValueField("Value")
                      .BindTo(Model.sList)
                      .Events(onselect => onselect.Change("ChangeEvent"))
                      )
                </td>
<span id="changingtext"></span>

function ChangeEvent(e){
   var value = this.value();
   // Utilize the widget's value
   if( value == "choice1"){
        $('#changingtext').text("word1");
   }
}

You might consider a similar approach.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Resolving issues with AJAX connectivity

Encountering an issue with my AJAX connection within Joomla. AJAX Troubleshooting $(document).ready(function() { var results = $('#hidden').serialize(); var url = '<php? echo JURI::base(); ?>index.php?option=com_mls&view ...

Issue with Font-Awesome icons failing to display properly when using the BootstrapCDN

Trying to integrate Font-Awesome icon fonts using the BootstrapCDN link with what seems like the latest version: <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> The link has been added to the <hea ...

Tips on positioning the search icon to the right

Does anyone know how to position the font awesome search icon to the right of the "Sign Up" text? Check out this screenshot of my navigation bar for reference: https://i.sstatic.net/vIGzP.jpg I've looked through various tutorials online, and they a ...

Self-referencing object identifier

Having trouble articulating this question, but I'm attempting to develop a JavaScript object that manages an array of images for reordering and moving purposes. function imgHandler(divname) { this.imgDiv = divname; this.img = Array("bigoldliz ...

Unable to center label when adjusting TextField height beyond default

I was tasked with reducing the size of the MUI Component TextField by 4px. To achieve this, I modified the root & .MuiOutlinedInput-input. Although it adjusted the height as desired, the label (Email) is no longer vertically centered. I attempted to so ...

What is the reason that utilizing $("input").first() does not function properly on Google Forms?

While practicing with Selenium, I encountered an issue while using this Google form. Specifically, I found that I couldn't select the first input field by using $("input").first() To confirm this issue, I turned to the web browser (Firefox) console t ...

Validation of a JSON string does not involve the use of jQuery

Having trouble determining whether a JSON String is a JSON Object or not using jQuery. Attempted to parse the string with: try { var jsonObject = jQuery.parseJSON(yourJsonString); } catch (e) { // handle error } Also tried evaluating it as an ...

What considerations should I keep in mind when changing the DOCTYPE from html 4.01 transitional to 'html'?

Firefox is telling me that my pages are being rendered in 'standards compliance mode' based on the doctype... <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> After changing it to < ...

Creating a Welcome Page for my React Application with IndexRoute

I am in the process of setting up a landing page that will then redirect to my main home page using React. I have created a component for the landing page named Splash. I am attempting to utilize IndexRoute to make sure my app initially displays Splash as ...

`The background video is not being displayed on the transparent PNG`

I have created a transparent PNG image featuring a theater setup and I am attempting to overlay a 1-second video as a background element, similar to a GIF. However, when I try to display the video, instead of seeing it, the background color appears. Additi ...

If the submission fails, then activate the selection of the ID

My dilemma is with a <select> element that initiates an AJAX call to the backend to display or hide additional <select> options based on user selection: $('#select1').on('change', function() { // Fetch fruit details ...

Looking to create circular text using HTML, CSS, or JavaScript?

https://i.sstatic.net/pnu0R.png Is there a way to generate curved text in HTML5, CSS3, or JavaScript similar to the image linked above? I've experimented with transform: rotate(45deg); but that just rotates the text without curving it. Additionally, ...

Display content in two columns. If the width of the left column is too narrow, move the content in the right column

In my layout, there is a wrapper div with two child elements: left div and right div. The left div contains text which can be lengthy, while the right div holds an image loaded asynchronously without known width: <div id="wrapper"> <div id="l ...

Symfony 2.8 upgrade for enhanced loading capabilities

Currently, I have a Task.php entity that retrieves chat messages from the database and displays them on the page. Here is how the messages are retrieved in the entity: /** * @return \Doctrine\Common\Collections\Collection|static */ p ...

What could be causing the unpredictable behavior of my Material UI Tabs component, where it seems to be overriding other

I am facing an issue with the styling of tabs in my React app dashboard that uses Material UI Tabs. Specifically, I have a tab in the dashboard that opens a modal for adding new users to the system. The modal itself also contains tabs, but no matter how I ...

Tips for solving AJAX post with jQuery on an ASP.NET page

After some experimentation, I discovered that adding the line alert(file) after the ajax block of code allows the code to work properly. However, when I remove the alert(file) line, the code fails to work. Here is the functioning code: function Delete(f ...

Checking for equality between two variables in a JavaScript validation scenario

<%@ page import="java.sql.*" %> <%@ page import="beans.Questionadd" %> <% int countanswer=0; String counter = request.getParameter("counter"); String counter2 = request.getParameter("counter2"); System.out.println("counter = "+counter+", ...

Extract the content from the division and set it as the image source

Looking for a way to retrieve the content from a div and insert that into the 'src' parameter of an image. Working on a project where JSON is used to load translation files, preventing me from loading images directly, but I want to at least load ...

What is the best way to store values from dynamically generated input fields into a single database column?

In my application, I have implemented 2 dynamically added input fields. My goal is to insert the values from these two fields into separate columns in the database. <div class="form-group "> <div id="itemRows" class="col-md-12"> & ...

Issue with ASP.NET Form Input - Width behaving differently than expected (not expanding to 100%)

Simple Form Issue: Problem: The width of the <input> element is not expanding to 100% If the class form-control is applied to the element, it should have a width of 100% Screenshot: Output from Visual Studio Utilizing Visual Studio 2017 (MVC5 AS ...