javascript - 根据下拉选择将值分配给单选按钮

Question

我目前正在开发一个表单，其中一个片段有 2 个元素的下拉菜单选择，它们旁边是与该下拉菜单关联的两个单选按钮。其中一个单选按钮是普通(非输入文本框)的单选按钮，另一个单选按钮用于自定义条目输入文本框。用例是，用户首先在下拉列表中选择一个元素，然后根据选择，如果用户单击第一个没有输入文本框的单选按钮，则应根据下拉选择分配该单选按钮的值。 .

下面是我的html代码:

<div class="uriDiv input-group">
  <select class="common authSelect form-control" name="authType" id="authType">
    <option value="">
      <spring:message code="newPolicy.selectAuthType"></spring:message>
    </option>
    <option value="DBUser">DBUser</option>
    <option value="LDAPUser">LDAPUser</option>
  </select>
</div>

<div class="auth-permission-rd">
  <div class="uriDiv radio radio-left">
    <label>
      <input type="radio" class="common anyuser" value="anyUser" name="authPermission" id="authPermission">Any User
    </label>
  </div>
  <div class="uriDiv radio radio-input">
    <label>
      <input type="radio" class="common groupuser" value="groupUser" name="authPermission" id="authPermission">
      <input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
    </label>
  </div>
</div>

我应该有一个jquery代码，将值分配给单选按钮..

因此，如果用户从下拉列表中选择“DBUser”并且选择“AnyUser”单选按钮，则 jquery 功能需要为该单选按钮分配一个可能是“AnyDBUserValue”的值。

如果用户从下拉列表中选择 LDAPUser 并且选择“AnyUser”单选按钮，则 jquery 功能需要为此分配一个值，该值可能是“AnyLDAPUserValue”给单选按钮。

如果用户想通过选择其他具有输入文本框的单选按钮来输入自定义值，那么我们需要丢弃以前的值并采用用户输入的自定义值。

我是 JQUery 的新手，因此需要帮助编写此功能的 jquery 代码...

感谢帮助..谢谢。

Answer 1

First you will perform drop down event like this...

$("#authType").change(function(){       
        $("#authPermissionValue").val($("[type = radio]").val().split("U")[0].toUpperCase() + $("#authType").val()) 
    })

or also like this..

$("#authType").change(function(){       
        $("#authPermissionValue").val("ANY" + $("#authType").val()) 
    })

and after this you can perform radio button even like this...

$(".groupuser").on( "click", function(){        
        $("#authPermissionValue").removeAttr("disabled");
        $("#authPermissionValue").val("");
    });

That solution is totally dynamic of your requirements.
no need to add extra hard code for conditions