Question

我昨天提出了一个类似的问题，但从那时起就无法提出解决方案，所以我把我的代码改进了一些似乎更合理的逻辑。但事实并非如此。我希望用户可以使用组合框中的几个选项，具体取决于预先选择的选项。这是Combobox：

<SELECT class=caixas id=cbostatus style="WIDTH: 3cm;" tabIndex=25 name=cbostatus onchange= "StatusTest(); hideField();" >   
                            <option selected></option>
                            <option value="Planned" id="optionPlanned" <?php if ($row['task_status']=='Planned') echo 'selected="selected"';?>>Planned</option>
                            <option value="Started" id="Started" <?php if ($row['task_status']=='Started') echo 'selected="selected"';?>>Started</option>
                            <option value="Available" id="Available" <?php if ($row['task_status']=='Available') echo 'selected="selected"';?>>Available</option>
                            <option value="Finished" id="Finished" <?php if ($row['task_status']=='Finished') echo 'selected="selected"';?>>Finished</option>
                            <option value="Impeded" id="Impeded" <?php if ($row['task_status']=='Impeded') echo 'selected="selected"';?>>Impeded</option>
                        </SELECT>

例如，选择“已计划”时，唯一的其他可用选项应为“已启动”。所以我去为一个Onchange事件制作了一个Javascript，就像这样：

function hideField(){
var e = document.getElementById("cbostatus");
 var strUser = e.options[e.selectedIndex].value;

 if( strUser == 'Planned' ) {
    document.getElementById("Impeded").style.display = 'none';
    document.getElementById("Available").style.display = 'none';
    document.getElementById("Finished").style.display = 'none';
 }
}

由于某种原因，这是错误的。有任何想法吗？（另外，如果你没有建议使用Jquery，我会预先确定，因为我之前从未使用过，也没有时间去学习这个）

Answer 1

我建议你从一个空的选择开始，并动态添加选项。

memlock

Answer 2

使用此代码。

Html
<select class=caixas id=cbostatus style="WIDTH: 3cm;" tabIndex=25 name=cbostatus>
    <option selected></option>
</select>

jQuery
var insertoption = "";

首先在就绪功能中添加选项

 $(document).ready(function()
{
  insertoption += "<option value='Planned' id='Planned'>Planned</option>";
  insertoption += "<option value='Started' id='Started'>Started</option>";
  insertoption += "<option value='Available' id='Available'>Available</option>";
  insertoption += "<option value='Finished' id='Finished'>Finished</option>";
  insertoption += "<option value='Impeded' id='Impeded'>Impeded</option>";
  $("#cbostatus").append(insertoption);
  insertoption = "";
});

这是创建您的选项

现在创建onchange函数

$("#cbostatus").on("change",function()
{
  if($("#cbostatus").val() == "Planned")
  {
    $("#cbostatus").children().remove();
    insertoption = "<option value='Started' id='Started'>Started</option>";
    $("#cbostatus").append(insertoption);
  }
});

根据所选的组合框限制组合框中的选项

2 个答案: