Question

我有html表单，在这里我想显示基于复选框的下拉选项是选中还是未选中。

如果选中了复选框，那么我想将印度结尾。如果未选中该复选框，那么我想在下拉选项中删除印度。

var jsonData = {'status':'success', 'text':'Locations found', 'data':[{"name":"Afghanistan","code":"af"},
						{"name":"Albania","code":"al"},
						{"name":"Algeria","code":"dz"}]};
						console.log(jsonData);
		$(function(){
			var options = '';
			$('#newcountry').change(function(event) {
				if(this.checked){

				jsonData.data.push({'name':'India'});
			for(i=0; i<jsonData.data.length; i++) {
				options += '<option value="' + jsonData.data[i].code + '">' + jsonData.data[i].name + '</option>';
        	}	
        		
				$('#country').append(options);

				}else{

					for(i=0; i<jsonData.length; i++) {
				options += '<option value="' + jsonData[i].code + '">' + jsonData[i].name + '</option>';
					

        	}	
        $('#country').append(options);		
				}
				
			});
		})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form action="">
            <div>
                <input id="newcountry" type="checkbox">
                    <select id="country" name="country">
                        <option value="">
                            --Select value--
                        </option>
                    </select>
                </input>
            </div>
        </form>

Answer 1

我已尝试将其分开，以使您进入遇到任何困难的部分。我对jQuery非常生锈，因此已将其转换为常规JS，但希望它仍然很清晰。

renderList函数显示构建选项，并将其发送到父元素上的innerHTML。
，并且在init函数中，复选框处理程序用于更改要呈现的列表

在最初的示例中有几个地方似乎是个问题，没有初始加载状态（下拉框为空白，直到您选中该框），并且您仅附加到选择框（您需要重置前删除选项）

const jsonData = '{"status":"success","text":"Locations found","data":[{"name":"Afghanistan","code":"af"},{"name":"Albania","code":"al"},{"name":"Algeria","code":"dz"}]}';

const buildOption = (option) => `<option value="${option.code}">${option.name}</option>`;

const renderList = (list, parentElement) => {
  const options = list.map(item => buildOption(item)).join('');
  parentElement.innerHTML = options;
}

const init = (jsonData) => {
  const obj = JSON.parse(jsonData);
  const selectBox = document.querySelector("#country");
  const checkBox = document.querySelector("#newcountry");
  let list = obj.data;

  checkBox.addEventListener("change", event => {
    if (event.target.checked) {
      list.push({
        name: "India",
        code: "code"
      });
      return renderList(list, selectBox);
    }

    // this section finds the added 'India' element and then slices it out of the list.
    const idx = list.findIndex(i => i.name === "India");
    if (idx > -1) {
      list = [...list.slice(0, idx), ...list.slice(idx + 1)];
    }
    renderList(list, selectBox);
  });
  
  renderList(list, selectBox);
};
init(jsonData);

<form action="">
  <div>
    <input id="newcountry" type="checkbox">
    <select id="country" name="country">
      <option value="">
        --Select value--
      </option>
    </select>
    </input>
  </div>
</form>

基于选中切换选择选项

1 个答案: