CODEWITHSUNDEEP
javascriptjquery-chosen
Mittul At TechnoBrave
Mittul At TechnoBrave

Reputation: 1242

chosen.js hide remove (X) from already selected options but keep for new options

I have one custom requirement in my project which I want to share with you.

I have used this awesome JavaScript library called jquery-chosen and this works well.

I have multiple selection drop-down box called as "Category" in edit profile page. Now when the page loads, this drop-down will have few already selected categories in the list.

Now what I want is, I should not be able to remove the already selected by clicking on Remove (X). But at the same time, I should be able to add new and when I add new, I should be able to see Remove (X) button because I haven't updated my page.

I went through their documentation and did some research on stackoverflow as well but so far I haven't found any proper solution to achieve this. Hence I have come up with a question ( So no code yet to show :( ). Hope this makes sense.

Can anyone guide me to accomplish this.

Upvotes: 0

Views: 882

Answers (1)

iStepashka
iStepashka

Reputation: 302

Every selected element after loaded will look like this:

<li class=search-choice>
         <span> text of selected item </span>
        <a class="search-choice-close" data-option-array-index="1"></a>
</li>

I suggest after loading you go over already selected items and place display:none style for an 'a' element, which is actually your 'X' for removal.

Upvotes: 1

Related Questions