怎么给select标签和input:radio动态的设置

需求：将JOSN数据中的值渲染到form表单中

 

1.html

<form action="">
    <div>
      <label for="">姓名：</label>
      <input type="text" placeholder="用户名" name="name">
    </div>
    <br>

    <div>
      <label for="">年龄：</label>
      <input type="text" placeholder="年龄" name="age">
    </div>
    <br>
    <div>
      <label for="">性别：</label>
      <input type="radio" name="sex" id="" value="男" checked>男
      <input type="radio" name="sex" id="" value="女">女
    </div>
    <br>
    <div>
      <label for="">组号：</label>
      <select name="group">
        <option value="1" selected>第一组</option>
        <option value="2">第二组</option>
        <option value="3">第三组</option>
        <option value="4">第四组</option>
        <option value="5">第五组</option>
        <option value="6">第六组</option>
        <option value="7">第七组</option>
        <option value="8">第八组</option>
      </select>
    </div>

  </form>

2.html的效果图：

3.js部分

    // 将josn数据的值，渲染到form表单中
    let jsonData = {
      "name": "小丽",
      "age": 18,
      "sex": "女",
      "group": 3
    }
    // 获取dom元素
    document.querySelector('[name=name]').value = jsonData.name;
    document.querySelector('[name=age]').value = jsonData.age;
    // 使用的是交集选择器，动态的获取DOM元素，并设置该元素的checked属性为true
    // 动态的设置input的radio属性
    document.querySelector(`[name=sex][value="${jsonData.sex}"]`).checked = true;
    // 使用后代选择器动态的获取DOM元素，并设置该元素的selected属性为true
    // 给select动态的设置默认值  注意的是value的值要使用双引号包裹起来，不然就会报错
    document.querySelector(`[name=group] [value="${jsonData.group}"]`).selected = true;

 4.最终渲染到页面中的效果图：