опция выбора переключателя на основе отмеченного отмечена

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>