title: How to compare dropdownlist text with static string
body: <p>Ok, a clearer picture (I hope)...</p>
  
  <p>In the HTML I have a combobox (dropdownlist) (<code>id= "program"</code>) ie: you click and select a value. The prompt text on the combobox (dropdownlist) is "Select a program..."</p>
  
  <p>Beneath this, on the page, I display a button (<code>id="addChosen"</code>). After the user has made a selection, they click the addChosen button to add the text from the combobox to the <code>&lt;textarea&gt;</code>, while I add the value <code>$('#program :selected').val()</code> to an array with: <code>programArray.push($('program :selected').val());</code></p>
  
  <p>Therefore, in order to help the user select ONLY valid options from the combobox, I want to stop the addition of "Select a program..."</p>
  
  <p>I want to compare the text from a dropdownlist to a static string:</p>
  
  <pre><code>if ($('#program :selected').text() == "Select a program..."); {
      //do something here, like show an alert for now...
      alert("Come on, you cant select the instructions...");
  } 
  else {
      //add the selected text to a &lt;textarea&gt;
      $('#chosenPrograms').append($('#program :selected').text() + "\n";
      }
  </code></pre>
  
  <p>This does not seem to compare the selected text, and simply insert the "Select a program..." into the <code>&lt;textarea&gt;</code>.</p>
  
  <p>It needs to prevent the user from being able to add "Select a program..." to the <code>&lt;textarea&gt;</code></p>
  
  <p>This is the complete page:</p>
  
  <pre><code>@{
  ViewBag.Title = "Subject Selector";
  ViewBag.Header1 = "Subject Selector";
  ViewBag.Header2 = "Choose the right subject - Grade 10-12.";
  ViewBag.Description = "Have an idea of what and where you want to study? Subject Chooser will identify the subjects and requirements you will need to achieve your goal.";
  }
  
  &lt;hgroup class="title"&gt;
      &lt;h2&gt;Select an institution, faculty and programme&lt;/h2&gt;
  &lt;/hgroup&gt;
  
  
  
  @using (Html.BeginForm("IndexDDL", "Home", FormMethod.Post, new { id="QueryProgrammesFormId", data_institutionListAction=@Url.Action("InstitutionList") } ))     {
  &lt;fieldset&gt;
      &lt;legend&gt;Institution/Faculty/Programme/Chosen Programmes&lt;/legend&gt;
      &lt;label for="institution"&gt;Institution&lt;/label&gt;
      @Html.DropDownList("institution", ViewBag.Institutions as SelectList, "Select an institution...", new { id = "institution", name = "institutionID" })
      &lt;label for="faculty"&gt;Faculty&lt;/label&gt;
      &lt;select id="faculty" name="faculty"&gt;&lt;/select&gt;  
      &lt;label for="programme"&gt;Programme&lt;/label&gt;
      &lt;select id="programme" name="programme"&gt;&lt;/select&gt;   
      &lt;p&gt;You can add up to &lt;strong&gt;5&lt;/strong&gt; programmes to the list below:&lt;/p&gt;
      &lt;p&gt;
          &lt;input type="button" id="addChosen" name="addChosen" value="Add Programme" /&gt;&amp;nbsp;
          &lt;input type="button" id="removeChosen" name="removeChosen" value="Remove Programme" class="hidden" /&gt;
      &lt;/p&gt;
      &lt;label for="chosenProgrammes"&gt;Chosen Programmes&lt;/label&gt; 
      &lt;textarea id="chosenProgrammes" name="chosenProgrammes" rows="5" cols="" placeholder="Programmes selected for analysis"&gt;&lt;/textarea&gt;
      &lt;p&gt;
          &lt;input type="button" name="goButton" id="goButton" value="Analyse my Programmes" style="display:none" /&gt;
      &lt;/p&gt;
  
  &lt;/fieldset&gt;
  
  /*Tommy: Local Disclaimer to show only when the button becomes available*/
  &lt;div id="localDisclaimer" class="hidden"&gt;
      @Html.Partial("_LocalDisclaimer")
      &lt;p&gt;
          &lt;input type="checkbox" name="AcceptDisclaimer" id="AcceptDisclaimer" /&gt; I have read the Disclaimer and wish to continue.
      &lt;/p&gt;
  &lt;/div&gt;
  }
  
  @section Scripts {
  @Scripts.Render("~/bundles/cascadingdropdown")
  &lt;script type="text/javascript"&gt;
      var cnt = 1;
      var selectedProgrammes = [];
      $(function () {
          $("#faculty").CascadingDropDown("#institution", 'Query/GetFaculties',
          {
              promptText: 'Select a faculty...',
              onLoading: function () {
                  $(this).css("background-color", "#ff3");
          },
  
          onLoaded: function () {
              $(this).animate({ backgroundColor: '#ffffff' }, 800, 'linear');
          }
      });
      $("#programme").CascadingDropDown("#faculty", 'Query/GetProgrammes',
      {
          promptText: 'Select a programme...',
          onLoading: function () {
              $(this).css("background-color", "#ff3");
          },
  
          onLoaded: function () {
              $(this).animate({ backgroundColor: '#ffffff' }, 800, 'linear');
          }
      });
      $('#programme').on('change', function () {
          if ($(this).val() == '') {
              $('#goButton').hide();
          }
          else {
          }
      });
      $('#AcceptDisclaimer').click(function () {
          if ($(this).attr('checked', 'checked')) {
              $('#goButton').show();
          }
      });
      $('#goButton').on('click', function () {
          /* 
          replace the call to Query/Results + programmeID 
          with
          SubjectSelector/Results + SelectedProgrammes[]
          */
  
          //window.location.href = 'Query/Results/' + $('#programme').val();
      });
  
      /*
      Before allowing the user to click on 'addChosen'
      check to see that the counter is less or equal to 5
      */
  
      $('#addChosen').click(function () {
  
          if ($('#programme:selected').val() == "Select a programme...") {
              alert("please make a proper selection");
          }
          else {
              $('#chosenProgrammes').append(cnt + " " + $('#programme :selected').text() + "\n");
              selectedProgrammes.push($('#programme :selected').val());
          };
  
          if (cnt &lt;= 4) {
              //                $('#removeChosen').show();
              $('#localDisclaimer').show();
          }
          else {
              $('#addChosen').hide();
          };
  
          cnt += 1;
      });
  });
  </code></pre>
  
  <p>
      }</p>
  
  <p>This is the function that fills the Programmes drop-down:</p>
  
  <pre><code>public ActionResult GetProgrammes(string faculty)
  {
      int facultyInt = int.Parse(faculty);
          var programmes = db.Programmes.Where(p =&gt; p.Faculty.FacultyId == facultyInt)
                                        .OrderBy(p =&gt; p.Name)
                                        .Select(p =&gt; new SelectListItem()
                                        {
                                            Text = p.Name,
                                            Value = SqlFunctions.StringConvert((double)p.ProgrammeId)
                                        });
          return Json(programmes);
      }
  </code></pre>