根据单选按钮打开下拉菜单

时间:2020-01-08 06:31:42

标签: javascript html angularjs

我想根据单选按钮的选择打开下拉选项。 Mu代码在AngularJS中

如果选择了“整体公司”,则不应显示下拉元素。 如果选择了受众特征,则应显示下拉元素。

我的HTML代码是:

 public String androidId;

 androidId = String
                .format("%16s", Settings.Secure.getString(getApplicationContext().getContentResolver(), Settings.Secure.ANDROID_ID))
                .replace(' ', '0');

我用Java脚本编写了一个函数,该代码是:

<div>
<label style =  "position:relative; left:10px; top:20px">Please Choose One:</label>
<div  style = "position: relative; left: 200px; top:-13px">
<input type="radio" checked="" value="OverallCompany" id="optionsRadios1" name="optionsRadios" ng-model="recom.radio" onclick="show();"> OverallCompany
<div>
<input type="radio" checked="" value="Demographics" id="optionsRadios1" name="optionsRadios" ng-model="recom.radio" onclick="show();">Demographics
</div>
</div>
</div>

<div class="form-group">
<label style="position: relative; left:10px; top: 28px">Demographics:</label>
<div style = "position: relative; left:200px">
<select multiple chosen class="chosen-select" id="demo" ng-model="recom.demo" ng-options = "z as z.demographicName for z in demotype" tabindex="4" style = "width:880px;" required >
</select>
</div>
</div>

请帮助操作。

谢谢

3 个答案:

答案 0 :(得分:0)

您希望在show函数中使用参数,但在模板中没有传递参数

<input type="radio" checked="" value="OverallCompany" id="optionsRadios1" name="optionsRadios" ng-model="recom.overall" onclick="show(recom.overall);"> OverallCompany

<input type="radio" checked="" value="Demographics" id="optionsRadios1" name="optionsRadios" ng-model="recom.demo" onclick="show(recom.demo);">Demographics

您可以在模板本身中使用ngIf轻松显示/隐藏,请参见以下示例https://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-if

答案 1 :(得分:0)

不需要功能。只需像这样添加ng-show

 <div class="form-group" ng-show="recom.radio == 'Demographics'">
    <label style="position: relative; left:10px; top: 28px">Demographics:</label>
    <div style="position: relative; left:200px">
      <select multiple chosen class="chosen-select" id="demo" ng-model="recom.demo" ng-options="z as z.demographicName for z in demotype" tabindex="4" style="width:880px;" required>
      </select>
    </div>
  </div>

答案 2 :(得分:0)

尝试下面的代码

<%= render 'layouts/sliding_door' if @sliding_door %>