Change value based on what clicked from dropdown menu in jquery

Question

I have a drop-down-menu with a list from my C# model. Now I want to change a value based on what I choose from the menu.

$(document).ready(function() {
  $("#Bereich").val('@Model.Bereich').change('click', function() {
    $("select option:selected").each(function() {
      if ($(this) == "Something") {
        $('#kst').val(123);
      }
      
      if ($(this) == "Somethingelse") {
        $('#kst').val(345);
      }
    });
  }).change();
});

I am quite new to jQuery so I am not sure how to get an element from a list.

Rory McCrossan · Accepted Answer · 2021-05-17 12:57:54Z

1

There's two main issues in your code. Firstly change('click', fn) isn't valid syntax. Given that we're dealing with a select element I assume you're trying to create a change event handler so the code should be on('change', fn) instead.

Secondly, $(this) will give you a jQuery object. This will never be equal to a string value so the conditions never hit. I assume you're trying to test the values of the selected items to use val() for this.

Note in the following example that I stored #kst in a jQuery object and referenced it repeatedly where needed to save accessing the DOM, which is where most performance is lost in JS. Also note that you can access val() directly from the select element - you don't need to retrieve the option:selected element within it.

jQuery($ => {
  let $kst = $('#kst');

  $("#Bereich").val('@Model.Bereich').on('change', function() {
    $("select").each(function() {
      let value = $(this).val();
      
      if (value === "Something") {
        $kst.val(123);
      } 
      
      if (value === "Somethingelse") {
        $kst.val(345);
      }
    });
  }).change();
});

answered May 17, 2021 at 12:57

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eden Over a year ago

Unfortunately the answer didn't work for me. Can the Problem be the id or that use @Html.DropDownListFor?

@Html.DropDownListFor(m => m.SelectedBereich, Model.Bereich, "Bereich auswählen", new { @id = "Bereich", @class = "form-control", @Required = true })

Rory McCrossan Over a year ago

That MVC control will still generate a standard HTML select element so the above should work. Could you please copy the HTML output from the browser and paste it in to your question so we can create a working example of the issue

Eden Over a year ago

Thanks for reminding me to look at the HTML output. The values weren't strings but numbers. "Something" had the Value 1 so instead of comparing it to the Value "Something" I should have compared it like this: value === "1" That change fixed it.

Collectives™ on Stack Overflow

Change value based on what clicked from dropdown menu in jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related