Question

我有2个选择标签，它们有相同的选项，男性和女性。其中一个(defun test (arg1 arg2) (request "http://httpbin.org/get" :params '(("key" . "value") ("key2" . "value2")) :parser 'json-read :success (lexical-let ((arg1 arg1) (arg2 arg2)) (cl-function (lambda (&key data &allow-other-keys) (message "%s %s sent: %S" arg1 arg2 (assoc-default 'args data)))))))，＆＃34;年龄＆＃34;是隐藏的。

select

当用户选择＆＃34;男性＆＃34;在＆＃34;性别＆＃34;，我希望＆＃34;年龄＆＃34;将自动选择＆＃34;男性＆＃34;同样。我希望和女性一样＃34;如何通过javascript实现这一目标？

Answer 1

您可以将事件change附加到您的选择gender，并在每次更改时设置age的值。

请注意，两个元素都应加载默认选定值，以便最终用户不选择任何内容，并检查是否最好将内联样式style="display:none;"移动到单独的css文件中。

代码：

＆＃13;

var gender = document.getElementsByName('gender')[0],
    age = document.getElementsByName('age')[0];

gender.addEventListener('change', function() {
  age.value = (gender.value == 1) ? 12 : 18;

  console.log('Gender:', gender.value);
  console.log('Age:', age.value);
});

＆＃13;

<select name="gender">
  <option value="1">Male</option>
  <option value="2">Female</option>
</select>

<select name="age" style="display:none;">
  <option value="12">Male</option>
  <option value="18">Female</option>
</select>

＆＃13;

Answer 2

这是使用jQuery的选项。

＆＃13;

$(document).ready(function() {
  $("#age").val("12");
  $("#gender").change(function() {
    var userselected = $(this).find(':selected').text();
    if (userselected == "Male") {
      $("#age").val("12");
    } else {
      $("#age").val("18");
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="gender" id="gender">
  <option value="1">Male</option>
  <option value="2">Female</option>
</select>
<select name="age" style="display:inherit;" id="age">
  <option value="12">Male</option>
  <option value="18">Female</option>
</select>

＆＃13;

根据以前的选项自动选择HTML隐藏选项值

2 个答案: