1
好比較，更清晰的畫面（我希望）...如何下拉列表的文本與靜態字符串
在HTML我有一個組合框（下拉列表）（id= "program"），即：單擊並選擇一個值。在組合框（下拉列表）上的提示文本是「選擇程序...」
在此之下，在頁面上，我顯示一個按鈕（id="addChosen"）。用戶已經做出選擇後，點擊addChosen按鈕，從下拉框的文本添加到<textarea>，而我的價值$('#program :selected').val()添加到一個數組：programArray.push($('program :selected').val());
因此，爲了幫助用戶選擇ONLY從組合框有效選項，我想停止添加「選擇程序...」
我想從下拉列表文本比較靜態字符串：
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", [email protected]("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);
}
HTML woudl會得心應手。你可以用一個HTML例子來設置一個jsFiddle嗎？ –
您的選擇器語法看起來沒有任何效果，您是不是收到了Javascript語法錯誤？ – Barmar