Javascript HTML JS选择默认选项

我有一个

select

元素，如下所示。当用户选择一个选项时，将调用

this.handleSelectClass

，这反过来会呈现另一个输入字段。（select语句位于引导模式内）

现在的问题是，在第一次选择之后，空选项仍保留在选项列表中，这使得列表看起来很难看，并且当我选择空选项时，程序也会抛出错误

<select class="form-control" onChange={this.handleSelectClass}>
              <option><option>
              <option>Small</option>
              <option>Medium</option>
              <option>Large</option>
</select>

我还尝试仅在未选择类别时显示空选项

<select class="form-control" onChange={this.handleSelectClass}>
                  {!this.state.categorySelected ? <option></option> : <div></div>}
                  <option>Small</option>
                  <option>Medium</option>
                  <option>Large</option>
</select>

{！this.state.categorySelected？：}
小的
中等
大的

但是，这也不起作用，因为select元素处于模态中。 如果我选择

Small

并关闭模式，当我再次打开它时，默认选项将是

Small

而不是空选项

<select class="form-control" onChange={this.handleSelectClass}>
              <option><option>
              <option>Small</option>
              <option>Medium</option>
              <option>Large</option>
</select>

---

如何使其在每次打开包含模式时都具有用于选择的默认选项？然后，在我进行第一次选择之后，我希望默认选项消失。

要创建一个HTML选择元素，使用默认的选定项，您可以将禁用的属性、选定的属性应用到option元素

默认选项
小的
中等
大的

要创建HTML选择元素，使用默认的选定项，您可以将已禁用的属性应用于option元素

默认选项
小的
中等
大的

使用

选择

并做出反应时，除了使用正常的

选择

属性外，您还必须做出反应，以便生成一个选择了默认值的受控组件

<select class="form-control" onChange={this.handleSelectClass}>
                  {!this.state.categorySelected ? <option></option> : <div></div>}
                  <option>Small</option>
                  <option>Medium</option>
                  <option>Large</option>
</select>

通过将

值

道具添加到实际的

选择

中，可以获得与具有

选择

属性的普通HTML选择相同的输出。这与一个普通的

onChange

处理程序相结合，将使它具有交互性和友好性

var Select = React.createClass({
    getInitialState: function () {
        return {selectValue: 'C'};
    },
    onChange: function (event) {
        this.setState({selectValue: event.target.value});
    },
    render: function() {
        return <select value={this.state.selectValue} onChange={this.onChange}>
            <option value="A">default</option>
            <option value="B">first</option>
            <option value="C">second</option>
        </select>;
    }
});

var Select=React.createClass({
getInitialState:函数（）{
返回{selectValue:'C'}；
},
onChange：函数（事件）{
this.setState（{selectValue:event.target.value}）；
},
render:function（）{
返回
违约
第一
第二
;
}
});

使用

选择

并做出反应时，除了使用正常的

选择

属性外，您还必须做出反应，以便生成一个选择了默认值的受控组件

<select class="form-control" onChange={this.handleSelectClass}>
                  {!this.state.categorySelected ? <option></option> : <div></div>}
                  <option>Small</option>
                  <option>Medium</option>
                  <option>Large</option>
</select>

通过将

值

道具添加到实际的

选择

中，可以获得与具有

选择

属性的普通HTML选择相同的输出。这与一个普通的

onChange

处理程序相结合，将使它具有交互性和友好性

var Select = React.createClass({
    getInitialState: function () {
        return {selectValue: 'C'};
    },
    onChange: function (event) {
        this.setState({selectValue: event.target.value});
    },
    render: function() {
        return <select value={this.state.selectValue} onChange={this.onChange}>
            <option value="A">default</option>
            <option value="B">first</option>
            <option value="C">second</option>
        </select>;
    }
});

var Select=React.createClass({
getInitialState:函数（）{
返回{selectValue:'C'}；
},
onChange：函数（事件）{
this.setState（{selectValue:event.target.value}）；
},
render:function（）{
返回
违约
第一
第二
;
}
});

您可以添加如下选项：请选择Use

$（“#yourmodalID”）.modal（'show.bs.modal'）

以在显示前清除select，或选择

$（“#yourmodalID”）.modal（'hidden.bs.modal'）

以在隐藏后清除

modal

，您可以调用“更改”打开表单时选择框上的事件…您可以添加如下选项：请选择Use

$（“#yourmodalID”）.modal（'show.bs.modal'）

以在显示前清除选择，或添加

$（“#yourmodalID”）.modal（'hidden.bs.modal'）

以在隐藏后清除

modal

打开表单时，可以在选择框上调用“更改”事件…不在React中，你没有。不是在React中，你没有。我已经实现了你的代码，但我仍然有两个以前的问题：1.在我进行第一次选择后，默认选项仍保留在那里2.如果我先选择

然后关闭模式，当我再次打开模式时，默认选择的选项将是
first
，因为我已经实现了您的代码，但我仍然存在前面的两个问题：1.在我进行第一次选择后，默认选项仍保留在那里2.如果我选择
first
，然后关闭模式，当我再次打开modal时，默认选择的选项将是
first