好的，更清晰的图片（我希望）...
在 HTML 中，我有一个组合框（下拉列表）（id= "program"），即：您单击并选择一个值。组合框（下拉列表）上的提示文本是“选择一个程序...”
在此下方，在页面上，我显示了一个按钮 ( id="addChosen")。用户做出选择后，他们单击 addChosen 按钮将组合框中的文本添加到<textarea>，而我将值添加$('#program :selected').val()到数组中：programArray.push($('program :selected').val());
因此，为了帮助用户从组合框中仅选择有效选项，我想停止添加“选择程序...”
我想将下拉列表中的文本与静态字符串进行比较：
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 <textarea>
$('#chosenPrograms').append($('#program :selected').text() + "\n";
}
这似乎并没有比较选定的文本，只需将“选择程序...”插入到<textarea>.
它需要防止用户能够将“选择程序...”添加到<textarea>
这是完整的页面：
@{
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.";
}
<hgroup class="title">
<h2>Select an institution, faculty and programme</h2>
</hgroup>
@using (Html.BeginForm("IndexDDL", "Home", FormMethod.Post, new { id="QueryProgrammesFormId", data_institutionListAction=@Url.Action("InstitutionList") } )) {
<fieldset>
<legend>Institution/Faculty/Programme/Chosen Programmes</legend>
<label for="institution">Institution</label>
@Html.DropDownList("institution", ViewBag.Institutions as SelectList, "Select an institution...", new { id = "institution", name = "institutionID" })
<label for="faculty">Faculty</label>
<select id="faculty" name="faculty"></select>
<label for="programme">Programme</label>
<select id="programme" name="programme"></select>
<p>You can add up to <strong>5</strong> programmes to the list below:</p>
<p>
<input type="button" id="addChosen" name="addChosen" value="Add Programme" />
<input type="button" id="removeChosen" name="removeChosen" value="Remove Programme" class="hidden" />
</p>
<label for="chosenProgrammes">Chosen Programmes</label>
<textarea id="chosenProgrammes" name="chosenProgrammes" rows="5" cols="" placeholder="Programmes selected for analysis"></textarea>
<p>
<input type="button" name="goButton" id="goButton" value="Analyse my Programmes" style="display:none" />
</p>
</fieldset>
/*Tommy: Local Disclaimer to show only when the button becomes available*/
<div id="localDisclaimer" class="hidden">
@Html.Partial("_LocalDisclaimer")
<p>
<input type="checkbox" name="AcceptDisclaimer" id="AcceptDisclaimer" /> I have read the Disclaimer and wish to continue.
</p>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/cascadingdropdown")
<script type="text/javascript">
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 <= 4) {
// $('#removeChosen').show();
$('#localDisclaimer').show();
}
else {
$('#addChosen').hide();
};
cnt += 1;
});
});
}
这是填充“程序”下拉菜单的函数：
public ActionResult GetProgrammes(string faculty)
{
int facultyInt = int.Parse(faculty);
var programmes = db.Programmes.Where(p => p.Faculty.FacultyId == facultyInt)
.OrderBy(p => p.Name)
.Select(p => new SelectListItem()
{
Text = p.Name,
Value = SqlFunctions.StringConvert((double)p.ProgrammeId)
});
return Json(programmes);
}