Jquery remove item from dropdownlist

Question

0.00/5 (No votes)

See more:

In our ASP.Net application (*NOT* MVC), we have a Kendo-UI dropdownlist that is populated in the Default.master file. The control itself is populated in an external "global" assembly, and I cannot alter the code in that assembly.

I want to remove an item from the ddl, but NOT from the collection the ddl is bound(?) to.

EDIT 2020.02.14 =============================

I fingered it out, but I'm not at work, and don't remember what it was that fixed it. I'll verify it on Tuesday (we have Monday off). I seem to remember that I needed to change the selector to something like

JavaScript

"#[ID*='ddlList']"

What I have tried:

I tried adding the following to the script section of the Default.master file:

JavaScript

$("#ddlList option[value='2']").remove();

and this:

JavaScript

$("#ddlList option[value='2']").hide();

and also this:

JavaScript

$("#ddlList").ajaxComplete(function()
{
    $("#ddlList option[value='2']").remove();
}

EDIT =================

I also tried this (because of the arbitrary id decoration that ASP.Net does):

JavaScript

$("[ID*='ddlList'] option[value='2']").hide();

BTW, I have verified that the ddl contains the option I'm looking for, but hiding/disabling it doesn't seem to have any effect.

EDIT ======================

This:

JavaScript

$("[ID*='ddlList']").find("option.contains('2')").hide();

actually changes the desired option to this:

HTML

<option value="2" style="display:none;">2</option>

but the item is STILL displayed in the dropdown.

Posted 14-Feb-20 3:02am

#realJSOP

Updated 16-Feb-20 5:25am

v8

Add a Solution

Comments

ZurdoDev 14-Feb-20 9:35am

$("#ddlList option[value='2']").remove(); will work so just debug it. But why do you have it in .ajaxComplete?

#realJSOP 14-Feb-20 10:11am

It was something i tried, without any basis in experience. IOW, it was a stab in the dark.

ZurdoDev 14-Feb-20 10:16am

So do the code but not in ajaxComplete. I doubt that event is running. Just add the code from whatever function you have where you want to remove it.

Richard Deeming 14-Feb-20 9:42am

The documentation suggests you can't remove an item without removing it from the data source. Perhaps you could use a custom template to hide or disable it instead?

ZurdoDev 14-Feb-20 10:17am

Hard to believe that since jquery is on the client side and anything can be changed there without the server knowing. It may end up causing problems with the model when posting back but I doubt that.

Richard Deeming 14-Feb-20 10:22am

For Kendo UI, it looks like the model's in Javascript as well. I don't know whether changes get sent back to the server, but I was assuming John didn't want to remove the item from the client-side collection.

Although I guess that could just be the MVC version; perhaps the WebForms version works differently.

Richard Deeming 14-Feb-20 10:29am

Are you using a Kendo.data.DataSource[^] to bind the list? It looks like you might be able to use the filter[^] property to filter out the item you don't want.

#realJSOP 14-Feb-20 11:27am

ummm, I don't know - I gotta dig through this spaghetti code to find it. again.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 14568714 · Answer 1 · 2020-02-14T04:50:00

Solution 1

$("#ddlList option[value='2']").remove();
$("#ddlList option[value='2']").hide();
both working fine.

Posted 14-Feb-20 4:50am

Member 14568714

Comments

#realJSOP 14-Feb-20 11:27am

not working here.

ZurdoDev 14-Feb-20 13:54pm

Which probably means your selector is wrong or your code is not actually executing. Either way, you'll have to debug it since we can't run your code.