Question

我正在尝试设置一个简短的表单，将每个选择框填充到下一个表单中。

第一个选择框选项在正文中编码，其余选项在html字符串中编码为与第一个下拉列表中的选项值相匹配的变量。似乎无法将所选值识别为对包含要加载的HTML字符串的变量的引用。如何将选择值识别为要加载的字符串？

我希望它可以将相关的字符串作为HTML加载到PathwaySubGroup下拉列表中。

<div id="PathwayAssignment">
  <a>Pathway Group</a>
  <select id="PathwayGroup">
    <option value="Pway1">NonPsychotic</option>
    <option value="Pway2">Psychotic</option>
    <option value="Pway3">Dementia</option>
    <option value="Pway4">Personality Disorder</option>
    <option value="Pway5">Other</option>
  </select>

  <a>Pathway Sub Group</a>
  <select id="PathwaySubGroup">
  </select>
</div>

Var Pway1 = '<option value="1">Depression</option><option value="2">Generalised Anxiety</option><option value="3">Panic Disorder</option><option value="4">Phobias</option><option value="5">PTSD</option><option value="6">Dissociative disorders</option><option value="7">Somatoform disorders</option><option value="7">Eating disorders</option>';

Var Pway2 = '<option value="8">Bipolar</option><option value="9">Schizophrenia</option><option value="10">Psychotic disorder NOS</option><option value="11">Delusional disorder</option><option value="12">Schizoaffective disorder</option><option value="13">Shizoid/Paranoid personality disorder</option>';

$("#PathwayGroup").change(function() {
  var PW = this.value
  $("#PathwaySubGroup").html(PW);

Answer 1

获取所选选项的ID，然后在第二个下拉菜单中隐藏或显示值。

<div id="PathwayAssignment">
<a>Pathway Group</a>
<select id="PathwayGroup">
    <option value="Pway1">NonPsychotic</option>
    <option value="Pway2">Psychotic</option>
</select>

<a>Pathway Sub Group</a>
<select id="PathwaySubGroup1">
    <option value="PSubgroup1" id="PSubgroup1">NonPsychotic</option>
    <option value="PSubgroup2" id="PSubgroup2">Psychotic</option>
</select>
</div>



<script type="text/javascript">
$('#PathwayGroup').on('change', function(){

    if( $(this).val() == 'Pway1' ){
        $('#PSubgroup1').hide();
        $('#PSubgroup2').show();
    } else if( $(this).val() == 'Pway2' ){
        $('#PSubgroup1').show();
        $('#PSubgroup2').hide();
    }

}); 
</script>

Answer 2

您只需将Pway变量添加到具有命名键的数组中即可。

var options = [];
options['Pway1'] = '<option value="1">Depression</option><option value="2">Generalised Anxiety</option><option value="3">Panic Disorder</option><option value="4">Phobias</option><option value="5">PTSD</option><option value="6">Dissociative disorders</option><option value="7">Somatoform disorders</option><option value="7">Eating disorders</option>';
options['Pway2'] = '<option value="8">Bipolar</option><option value="9">Schizophrenia</option><option value="10">Psychotic disorder NOS</option><option value="11">Delusional disorder</option><option value="12">Schizoaffective disorder</option><option value="13">Shizoid/Paranoid personality disorder</option>';

.change事件的唯一更改是获取数组的正确值。

$("#PathwaySubGroup").html(options[this.value]);

Answer 3


class IngredientForm(FlaskForm):
    description = StringField()

class MethodsForm(FlaskForm):
    method = StringField()

class RecipeForm(FlaskForm):
    recipe_name = StringField('Recipe Name:')
    recipe_type = StringField('Recipe Type:')
    recipe_desc = StringField('Description:')
    serving = StringField('Serving Size:')
    prep_time = StringField('Preparation Time:')
    cook_time = StringField('Cooking Time:')
    ingredients = FieldList(StringField(IngredientForm), 'Ingredients:', min_entries=4, max_entries=25)
    method = FieldList(StringField(MethodsForm), 'Method:', min_entries=4, max_entries=10)
    img_url = StringField('Got a photo link?:')
    submit = SubmitField('Add Recipe')

var Pway1 = 'DepressionGeneralised AnxietyPanic DisorderPhobiasPTSDDissociative disordersSomatoform disordersEating disorders';

var Pway2 = 'BipolarSchizophreniaPsychotic disorder NOSDelusional disorderSchizoaffective disorderShizoid/Paranoid personality disorder';

$("#PathwayGroup").change(function () {
  $("#PathwaySubGroup").html("");
  var text = window[this.value];
  $("#PathwaySubGroup").append('<option value="">' + text + '</option>');
});

jQuery根据其他选择值动态设置选择选项

3 个答案: