Question

我有两个属性选择，第二个的内容取决于第一个的选择。如果您选择成人，我希望显示所有标题选项。如果您选择Child，我只希望显示先生或小姐。我写了一个简单的javascript来隐藏不需要的选项，这几乎可以正常工作。如果我选择Child，那么不需要的选项就不会显示。如果我然后将其更改为成人，则显示所有选项。但是，如果我首先选择成人，则下拉列表会分开，只留下一个选项值列表。

我使用的javascript是

    ArrayAdapter<String> adapter;
    ArrayList<JSONObject> items;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ListView listView=(ListView)findViewById(R.id.listv);
        items=new ArrayList<JSONObject>();
        adapter=new ArrayAdapter(this, R.layout.item_layout,R.id.txt,items);
        listView.setAdapter(adapter);
    }
  String url ="Returns Json file"
  JsonArrayRequest jsonArrayRequest=new JsonArrayRequest(url,new Response.Listener<JSONArray>() {
         public void onResponse(JSONArray jsonArray){
          for (int i=0;i<jsonArray.length();i++) {
try {
                    JSONObject jsonObject = jsonArray.getJSONObject(i);
                    items.add(jsonObject);
                } catch (JSONException e) {
                    e.printStackTrace();
                }

                    adapter.notifyDataSetChanged();
                }
            }
        },new Response.ErrorListener() {
        @Override
    public void onErrorResponse(VolleyError volleyError){
            Log.e("Error", "Unable to parse json array");
        }
    });

    requestQueue.add(jsonArrayRequest);
}

这里可以找到一个小提琴。 http://jsfiddle.net/2t7oj91d/ 如果成人是第一个选择，我该怎么做才能防止这种情况发生？

Answer 1

option个元素不能包含在select以外的任何内容中。通过展开它们，您实际上强制渲染器将其从select中移除，这就是您的HTML似乎破坏的原因。另请注意，隐藏/显示option元素并非在所有浏览器中都得到很好的支持。

考虑到这一点，您可以通过启用/禁用选项来获得更好的服务。为此，您可以向option元素添加一个类，该元素仅适用于Adult选项，并根据需要禁用/启用它们。试试这个：

$("#attrib-1").change(function () {
    var id = $(this).val();
    $("#attrib-2 option.adult").prop('disabled', id == 3);
});

<select name="id[2]" id="attrib-2">
    <option value="4">Please Select</option>
    <option value="5">Mr</option>
    <option class="adult" value="6">Mrs</option>
    <option class="adult" value="7">Ms</option>
    <option value="8">Miss</option>
    <option class="adult" value="9">Dr</option>
    <option class="adult" value="10">Prof</option>
</select>

Updated fiddle

我的javascript中隐藏选择选项时出错

1 个答案: