わかりました、より鮮明な画像（願っています）...
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);
}