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