Asked  6 Months ago    Answers:  5   Viewed   28 times

I have searched Google and can't find anything on this.

I have this code.

<select ng-model="somethingHere" 
        ng-options="option.value as option.name for option in options"
></select>

With some data like this

options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];

And the output is something like this.

<select ng-model="somethingHere"  
        ng-options="option.value as option.name for option in options" 
        class="ng-pristine ng-valid">

    <option value="?" selected="selected"></option>
    <option value="0">Something Cool</option>
    <option value="1">Something Else</option>
</select>

How is it possible to set the first option in the data as the default value so you would get a result like this.

<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>

 Answers

62

You can simply use ng-init like this

<select ng-init="somethingHere = options[0]" 
        ng-model="somethingHere" 
        ng-options="option.name for option in options">
</select>
Tuesday, June 1, 2021
 
Powering
answered 6 Months ago
36

I guess you need something like this:

const MySelect = props => (
<Select
    {...props}
    value={props.options.filter(option => option.label === 'Some label')}
    onChange={value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    placeholder={props.placeholder}
  />
);
Tuesday, June 22, 2021
 
godot
answered 6 Months ago
88

Doing a little digging, I can see this issue raised on GitHub.

One option is to check to see if the value exists, and append it if it doesn't.

var s2 = $("#selectEvents").select2({
    placeholder: "Choose event type",
    tags: true
});

var vals = ["Trade Fair", "CA", "Party"];

vals.forEach(function(e){
if(!s2.find('option:contains(' + e + ')').length) 
  s2.append($('<option>').text(e));
});

s2.val(vals).trigger("change"); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>

<select multiple name="event_type[]" class="form-control" id="selectEvents">
  <option>Trade Fair</option>
  <option>Party</option>
  <option>Foo</option>
  <option>Bar</option>
</select>
Tuesday, August 3, 2021
 
Zulakis
answered 4 Months ago
15

Instead of setting the selected attribute, just use .val("2").

See here: jsFiddle

Thursday, August 12, 2021
 
Goudgeld1
answered 4 Months ago
97

I believe your problem clones a pre-existing angular issue which has a work around available.

Feel free to browse the issue and trace the conversation and some of the duplicates.

The work around suggested for Chrome/Safari/Firefox looks like this:

directive('changeOnKeyup', function changeOnKeyupDirective() {
  return function changeOnKeyupPostLink(scope, elem) {
    elem.on('keyup', elem.triggerHandler.bind(elem, 'change'));
  };
});

Edit:

The OP's issue in the comments above was closed as a duplicate for this reason.

Thursday, September 30, 2021
 
zmb
answered 2 Months ago
zmb
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share