[RESOLVED]how to do change the label when dropdownlist selected item index change in mvc4

Hi ,

I have a drop down list. I wanted to change the Label of the text box ( which is on the partial page) based on the value changed in the drop down. Here is my drop down list code.

   <div class="span4">
                            <div class="control-group">
                                <label class="control-label">Media Type: *</label>
                                <div class="controls">
                                    @Html.DropDownListFor(f => f.Invoice.Type, new[] {
                                   new SelectListItem
                                   { Text = "Radio", Value ="Radio" },new SelectListItem
                                   { Text = "Cable", Value ="Cable" },new SelectListItem
                                   { Text = "Print", Value ="Print" }
                                   }, String.Empty, new { @class = "input-xlarge" })
                             

                                </div>
                            </div>
                        </div>

Here is my label html code

  <div class="control-group">
                        <label class="control-label">Radio Station:</label>
                        <div class="controls">
                            @Html.TextBoxFor(f => f.Credit, @class = "input-xlarge focused" })
                        </div>
                    </div>

Here if i change the drop down list to cable, then i want the above label to be changed as " Cable Station"

and if i change the drop down list to print, then i want the above label to be changed as "Print Station"

Can you guys help me how to implement this.  This is very simple in regular ASP.net. MVC is new to me. appreciate your help.

Thanks.!

Hi vkasp,

Add id to the label like

<label class="control-label" id="LabelId">Radio Station:</label>

In Jquery, when the dropdown is changed, just set the value of the label, using this id as mentioned below:

$("#ddlStation").change(function () {
         var stationName= $("#ddlStation option:selected").text();
        if (!(stationName== "")) {
            return;
        }
        else {
            $("#LabelId").text(stationName+ " Station");
        }
});

Give dropdown id as well as ddlStation

Hi,

I added the jquery and label id. still the label text is not changing.? am i doing anything wrong? please advise.  

below is the id i added to the drop down. Thanks

        @Html.DropDownListFor(f => f.Invoice.Type, new[] {
                                   new SelectListItem
                                   { Text = "Radio", Value ="Radio" },new SelectListItem
                                   { Text = "Cable", Value ="Cable" },new SelectListItem
                                   { Text = "Print", Value ="Print" }
                                   }, String.Empty, new {id="ddlStation", @class = "input-xlarge" })

You can use the below Jquery code to assign text to label based on the value selected in dropdownlist

<!-- JS includes -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
              $(function() {
			<!-- Attach change event to dropdownlist -->
               $('.input-xlarge').change(function() {
			<!-- JS includes -->
                  var selectedval = $(this).val();
			<!-- Get the label control -->
				$('.control-label').text(selectedval + " Station");
		    });
           });
</script>

I have used the Jquery css classs selector , if you want to use id you need to change it accordingly

View Code

@using (Html.BeginForm())
				{
					
				 <div class="span4">
                            <div class="control-group">
                                <label class="control-label">Media Type: *</label>
                                <div class="controls">
                                    @Html.DropDownListFor(f => f.Invoice.Type, new[] {
                                   new SelectListItem
                                   { Text = "Radio", Value ="Radio" },new SelectListItem
                                   { Text = "Cable", Value ="Cable" },new SelectListItem
                                   { Text = "Print", Value ="Print" }
                                   }, String.Empty, new { @class = "input-xlarge" })
                             

                                </div>
                            </div>
                        </div>
				<div class="control-group">
                        <label class="control-label" value="Radio Station:"></label>
			<div class="controls">
                            @Html.TextBoxFor(f => f.Credit, @class = "input-xlarge focused" })
                        </div>
                    </div>
				}

Did you add Id to label as well, and used the same in jQuery code?

Please, Share complete code to help you much better.

Leave a Reply