JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
    <legend>Taking advantage of knockout syntax</legend>
    <div data-bind="foreach: dropdowns">
        <select data-bind="options: options, optionsText: 'name', optionsCaption:'Select an item', value: $root.selected1"></select> <span data-bind="text: ko.toJSON($root.selected1)"></span>

    </div>
</fieldset>
<fieldset>
    <legend>More verbose data-binds</legend>
    <div data-bind="foreach: dropdowns">
        <select data-bind="foreach: { data: $data.options, as: 'opt'}, value: $root.selected2">
            <option data-bind="text: opt.name, value: opt"></option>
        </select> <span data-bind="text: ko.toJSON($root.selected2)"></span>

    </div>
    <div data-bind="foreach: dropdowns">
        <select data-bind="foreach: { data: $data.options, as: 'opt'}, value: $root.verboseWithMasking">
            <option data-bind="text: opt.name, value: opt.id"></option>
        </select> <span data-bind="text: ko.toJSON($root.verboseWithMasking)"></span>

    </div>
    </div>
</fieldset>
<fieldset>
    <legend>Detailed explanation</legend>
    <span>The options are hard coded</span>
    <select data-bind="value: hardCoded1">
        <option value="">I am really an empty string.</option>
        <option value="101010100101010">I look nice to the user</option>
    </select> <span data-bind="text: ko.toJSON(hardCoded1)"></span>
    <br/>
    <span>The options are verbosely data bound</span>
     <select data-bind="foreach: data, value: hardCoded2">
            <option data-bind="text: text, value:  value"></option>
     </select> <span data-bind="text: ko.toJSON(hardCoded2)"></span>
    
</fieldset>

JavaScript

var vm = {
      selected1: ko.observable(),
      selected2: ko.observable(),
      verboseWithMasking: ko.observable(),
      hardCoded1: ko.observable(),
      hardCoded2: ko.observable(),
      data: [{text: "I am really an empty string.", value: ""},
      {text: "I look nice to the user.", value: "101010100101010"}],
      dropdowns: [{
          id: 1,
          name: "Job Difficulty",
          options: [{
              id: 1,
              name: "name1",
          }, {
              id: 2,
              name: "name2",
          }, {
              id: 3,
              name: "name3"
          }, {
              id: 4,
              name: "name4",
          }]
      }]
  };

  ko.applyBindings(vm)