Want to add none as value in select multiple

Question

I am using chosen.jquery.js for select field

<select chosen multiple data-placeholder="Select Body Part(s)"  
ng-options="option.Name as option.Name for option in BodyPartList" ng-model="Body_Part">
      <option value="" disabled>Select Body Part(s)</option> 
</select>

But It shows only data-placeholder value in case of no data in model. I want to show "Select Body Part(s)" as a option in list. And user must not select this. Reason is that, I want to add dynamic "Unknown" value in list of Body_Parts. But it not reflect in list.

Same work for select having single selection.

score 8 · Accepted Answer · answered Nov 23 '16 at 11:53

I'm not seeing any problems with your code, as such. Like, I'm trying it and getting the visual behaviour I think you're wanting? Am I missing something?

Html just yours with ng-app etc, javascript is:

var myApp = angular.module('myApp', ['localytics.directives']);

myApp.controller('MyController', function($scope) { 
  $scope.BodyPartList = [
    { Name: "Arm" },
    { Name: "Leg" }
  ];

  $scope.Body_Part = [];
});

Not sure if data-placeholder is actually doing anything.

Fiddle: http://jsfiddle.net/7187f6d9/

That said, it's not "working". In the fiddle I put a regular select box alongside the chosen one, and the chosen one doesn't seem to be writing to the ng-model correctly. I'm not sure what's up with that.

It looks your code working properly!! while I am trying same but seems not working. — Pooja-G, Nov 24 '16 at 07:00
It may be plugin version, I am using is diffrent than in your example. Thank you!! — Pooja-G, Nov 24 '16 at 07:06

score 1 · Answer 2 · answered Nov 23 '16 at 11:42

You can choose the below option https://harvesthq.github.io/chosen/#optgroup-support

or push another item to the top of the array from server side as your custom label and disable it on client side with the help of ng-if and $index properties of ng-repeat and angularjs. If this make sense then its fine else i can give you a demo.

score 1 · Answer 3 · answered Nov 23 '16 at 12:02

I hope your query is, you want show a place holder as current selected value but user shouldn't be able to select it.

Instead of making it disabled, make ithidden. Then display an error if a user doesn't select any other options, using the value of placeholder option.

A sample snippet is added below. If value of select is Error, write a case to throw a error back to user.

<select>
  <option value="Error" hidden>Select any Company</option>
  <option value="Toyota">Toyota</option>
  <option value="Nissan">Nissan</option>
  <option value="BMW">BMW</option>
</select>

Hope this helps! If not, ping me with your query. :)

Then, it seems like @Duncan did a pretty good job addressing your problem. — bharadhwaj, Nov 24 '16 at 07:15

Want to add none as value in select multiple

3 Answers3