Question

我尝试遵循几个答案，但均未成功。单击“添加锻炼”按钮时，我试图使选择框返回到“请选择一个选项”。我可以在这样的简单情况下使用它：

        <div id="retro_add_exercises">
          <div class="row">
            <div class="input-field col s12">
              <div class="select-wrapper initialized">
                <select class="initialized"  id="exercise_category">
                  <option value="0" disabled="" selected="">Please Select One</option>
                  <option value="1">Cardio</option>
                  <option value="2">Weight Lifting</option>
                  <option value="3">Stretching</option>
                </select>
              </div>
            </div>
          </div>

          <!-- CARDIO SELECT FIELD -->
          <div class="row" id="select_cardio">
            <form method="POST" id="cardio_form">
              <div class="input-field col s12">
                <button class="btn waves-effect waves-light" id="add_exercise_from_cardio" type="submit" name="action" value="ADD">Add Exercise from cardio</button>
              </div>
            </form>
          </div>
<script type="text/javascript">
  $(document).ready(function() {
    $('#add_exercise_from_cardio').click(function() {
        $('#exercise_category').val('0').change();
    });
});
</script>

但是在我的主项目中，当我同时单击按钮并显示和隐藏行时，它不起作用。任何帮助将不胜感激。

    $(document).ready(function() {

    $('#retroactive_date_form').submit(function(e) {
        e.preventDefault();
        var date = $('#retroactive_date_picker');
        var exercise_date = date.val();
        if (exercise_date !== '') {
            var exercise_category;
            var weight_set_type;
            console.log(exercise_date);
            date.prop('disabled', true);
            $('#retroactive_date_submit').addClass('disabled');
            $('#retro_add_exercises').show();

            //Exercise Category Function
            $('#exercise_category').on('change', function() {
                exercise_category = $('#exercise_category').val();
                console.log(exercise_category);
                if (this.value === '1')
                {
                    $('#select_cardio').show();
                    $('#drop_or_reg_set_select_exercise').hide();
                    $('#super_set_select_exercises').hide();
                    $('#drop_and_regular_set_action_btn').hide();
                    $('#super_set_action_btn').hide();
                    $('#super_set_table_row').hide();
                    $('#drop_or_reg_set_table_row').hide();
                }
                else
                    $('#select_cardio').hide();
                if (this.value === '2')
                {
                    $('#select_weight').show()
                }
                else
                    $('#select_weight').hide();
                if (this.value === '3')
                {
                    $('#select_stretch_fields').show();
                    $('#select_cardio').hide();
                    $('#drop_or_reg_set_select_exercise').hide();
                    $('#super_set_select_exercises').hide();
                    $('#drop_and_regular_set_action_btn').hide();
                    $('#super_set_action_btn').hide();
                    $('#super_set_table_row').hide();
                    $('#select_weight').hide();
                    $('#drop_or_reg_set_table_row').hide();
                }
                else
                    $('#select_stretch_fields').hide();
                return exercise_category;
            });

            ///////////Cardio Training Functions///////////////
            //Selecting Cardio Exercise
            $('#cardio_exercise').on('change', function (e) {
                var cardio_exercise;
                cardio_exercise = $('#cardio_exercise').val();
                console.log(cardio_exercise);
            });

            //Adding Another Exercise After Done Adding Current Cardio Exercise
            $('#add_exercise_from_cardio').on('click', function(e) {
                e.preventDefault();
                $('#exercise_category option[value="0"]').attr('selected', true);
                $('#select_cardio').hide();
                $('#drop_or_reg_set_select_exercise').hide();
                $('#super_set_select_exercises').hide();
                $('#drop_and_regular_set_action_btn').hide();
                $('#super_set_action_btn').hide();
                $('#super_set_table_row').hide();
                $('#drop_or_reg_set_table_row').hide();
            });

    //Error Handling If No Date is Selected Before Starting
        else {
            alert('Please select date')
        }
    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div id="retro_add_exercises" style="display:none">
              <div class="row">
                <div class="input-field col s12">
                  <div class="select-wrapper initialized"><span class="caret">▼</span>
                    <select class="initialized"  id="exercise_category">
                      <option value="0" disabled="" selected="">Please Select One</option>
                      <option value="1">Cardio</option>
                      <option value="2">Weight Lifting</option>
                      <option value="3">Stretching</option>
                    </select>
                  </div>
                  <label>Choose Exercise Type</label>
                </div>
              </div>

              <!-- CARDIO SELECT FIELD -->
              <div class="row" style="display:none" id="select_cardio">
                <form method="POST" id="cardio_form">
                  <div class="input-field col s12">
                    <div class="select-wrapper initialized"><span class="caret">▼</span>
                      <select id="cardio_exercise" name="cardio_exercise" class="initialized">
                        <option value="0" disabled selected>Choose Cardio Exercise</option>
                        <option value="1">Jumping Jacks</option>
                        <option value="2">Jump Rope</option>
                        <option value="3">Precor</option>
                        <option value="4">Running (outside)</option>
                        <option value="5">Swimming</option>
                        <option value="6">Treadmill</option>
                      </select>
                    </div>
                    <input type="date" style="display:none" id="cardio_exercise_date" name="cardio_exercise_date">
                    <input placeholder="Duration (minutes)" name="cardio_duration" id="cardio_duration" type="number" class="validate">
                    <input placeholder="Distance (optional)" name="cardio_distance" id="cardio_distance" type="number" class="validate">
                    <button class="btn waves-effect waves-light" id="add_exercise_from_cardio" type="submit" name="action" value="ADD">Add Exercise</button>
                    <button class="btn waves-effect waves-light" id="finish_tracking" type="submit" name="action" value="FINISH">Finish Workout</button>
                    <label for="cardio_exercise">Choose Exercise</label>
                  </div>
                </form>
              </div>

Answer 1

jQuery documentation规定，自jQuery 1.6起，attr将不会更新DOM元素的动态状态。此外，您的选择似乎在被选择后被禁用。试试：

$('#exercise_category option[value="0"]').prop('disabled', false);
$('#exercise_category option[value="0"]').prop('selected', true);

Answer 2

也许有更好，更有效的方法来解决它，但我想通了。我将选择选项包装在表单包装器中，并给了表单ID。然后在按钮上单击“我使用...触发了表单的重置”

$('#button_id').on('click', function(e) {
    e.preventDefault();
    $('#form_id').trigger('reset');
});

尽管我敢肯定有更好的方法，但是这种方法对我有用，希望对其他人也有用。

使用jQuery单击按钮时未设置选择选项

2 个答案: