Question

好的，我会尽可能彻底地描述我的问题。我有2个选择框。一个很好。另一个有一个国家/地区列表，根据用户选择的国家/地区，HTML会生成另一个下拉列表（状态），其中包含有关该国家/地区的状态。如果该国家没有州/省，则只会转到该表单的另一部分（另一个HTML页面）。那部分（没有州/省）工作正常。我现在设置它的方式，如果用户选择美国我得到第三个下拉，其中有状态。然后，如果用户将他们的想法从“美国”改为让我们说“英国”，我想要HTML来生成英国的州/省，而不是美国。现在，它的设置方式是，如果他们改变主意，就会提交来自用户，用户只能从他们改变主意的全国各地的学校中选择。它会跳过州/省的部分。我知道这可能会令人困惑，但如果您有任何问题可以随意提问。这是我的HTML和JavaScript代码。任何帮助表示赞赏。我知道我可能不应该使用submit方法，但我不确定如何实现这一点。

<form id="form" action="<?= $_SERVER['PHP_SELF'] ?>?S2XEvent=Step1half" method="post">
<table cellpadding="0" cellspacing="0" border="0" width="50%">
<tr>
    <td colspan="2">
        <fieldset class="fs">
            <legend class="blue">General Information</legend>

            <div class="error-msg"><? $this->DisplayValidatorError() ?></div>

            <div id="step_1half">
                <table cellpadding="2" cellspacing="2" border="0" width="100%">
                    <tr> 
                        <td class="form-label-required">Affiliation Type: <span class="asterisk">*</span></td>
                        <td><?= $this->GenHTML_Select('affiliation_type', $aff_type, $affiliation_type, 'form-input-stretched'); ?></td>
                    </tr>
                    <tr> 
                        <td class="form-label-required">Country: <span class="asterisk">*</span></td>
                        <td> 
                            <select  id="country_code" name="country_code" class="form-input-stretched" onchange="refresh()">
                            <? while(list($abbrev, $name) = each($countries)) { ?>
                            <? if($name == 'Common Countries' || $name == 'Alphabetical Listing') { ?>
                            <option value="<?= $abbrev ?>" class="bg"><?= htmlentities( $name ) ?></option>
                            <? } else { ?>        
                            <option <?= ($abbrev == $country_code || ($country_code == '' && trim($abbrev) == 'USA') ) ? 'selected' : '' ?> value="<?= $abbrev ?>"><?= htmlentities( $name ) ?></option>
                            <? } ?>
                            <? } ?> 
                            </select>
                        </td>
                    </tr>
                    <script>
                        function refresh(){
                            window.getSelection($(this).val(), '');                                 
                            $("#form").submit();
                        }                               
                        </script>
                     <?  if ($total > 0){   ?>                                           
                        <tr> 
                        <td class="form-label-required">State: <span class="asterisk">*</span></td>
                        <td> 
                            <select name="state_province_code" class="form-input-stretched">
                                <?= implode('', $states); ?>
                            </select>
                        </td>

                    </tr>
                    <tr> 
                        <td class="form-label">City:</td>
                        <td><input name="city" type="text" class="form-input-stretched" id="city" value="<?= $city ?>" /></td>
                    </tr>
                    <? } else { echo "<meta http-equiv=\"refresh\" content=\"0;URL=https://blahblahblah?S2XEvent=Step2\">";} ?>
                </table>

Answer 1

最简单的方法是使用JavaScript和jQuery等工具包。获取必须更改的下拉列表的原始选项并将其保存在某个变量中。然后，当用户改变主意时，只需使用jQuery的DOM操作API重新插入它们。

如果用户在一个选择上改变主意，则重新填充下拉列表

1 个答案: