Измените идентификатор div на переменную javascript

#javascript #html

#javascript #HTML

Вопрос:

Хорошо, теперь я использую приведенный ниже код, который отлично работает. Выбранный параметр находится в переменной:’val’ . но теперь я хочу изменить идентификатор div. Итак, как мне изменить значение ‘var_div’ на значение ‘val’?

  <form name="form1" method="POST">
    <select name="select1" onchange="updatevariable(this)">
    <option value="div2" >2</option>
    <option value="div15" >15</option>
    </select>
    </form>

    <script type="text/javascript">
    function updatevariable(elm) {
    val = elm.options[elm.selectedIndex].value;
    window.alert(val);
    }
    </script>

    <div id='var_div'>
    </div>
  

Ответ №1:

Как насчет этого…

 document.getElementById("var_div").setAttribute("id", val);
  

… с помощью jQuery

 $('#var_div').attr('id',val);
  

Я надеюсь, что это поможет.
Христо

Комментарии:

1. Я рекомендую не заглядывать в jquery, пока вы не освоитесь с javascript достаточно хорошо, чтобы сначала изучить основы 🙂

2. @Marwan … конечно, я просто хотел включить это для развлечения

Ответ №2:

Вы можете сделать что-то столь же простое, как

 document.getElementById('var_div').setAttribute('id',val)
  

Но вы также можете захотеть изучить такой фреймворк, как jquery. Что, если вы собираетесь делать много подобных вещей, сделает вашу жизнь намного проще!

Ответ №3:

 document.getElementById("var_div").id = val;
  

Редактировать:

Кстати, вы захотите сохранить идентификатор элемента где-нибудь в другом месте, чтобы знать, какой идентификатор искать в следующий раз, когда захотите его изменить. Если вы этого не сделаете, этот код сработает только один раз. Если вы хотите поддерживать повторное изменение идентификатора, вы можете захотеть сделать что-то вроде этого:

 <script type="text/javascript">
    var currentDivId = "var_div";

    function updatevariable(elm) {
        val = elm.options[elm.selectedIndex].value;
        window.alert(val);
        var divElement = document.getElementById(currentDivId);
        divElement.id = val;
        currentDivId = val;
    }
</script>
  

Ответ №4:

Вы можете сделать это, если вам нужно:

 <div id="test"></div>
<script type="text/javascript">
var elem = document.getElementById("test");
alert(elem.id);
elem.id = "test2";
alert(document.getElementById("test2").id);
</script>
  

Измените свойство id элемента после того, как вы выбрали его с помощью Javascript.

Ответ №5:

если этот div является единственным в форме, как показано, так что это просто, вот так

  <form name="form1" method="POST">
    <select name="select1" onchange="updatevariable(this)">
    <option value="div2" >2</option>
    <option value="div15" >15</option>
    </select>
    </form>

    <script type="text/javascript">
    function updatevariable(elm) {
    document.getElementByTagNames('DIV')[0].id= elm.options[elm.selectedIndex].value;
    }
    </script>

    <div id='var_div'>
    </div>
  

я динамически получал div не по идентификатору, потому что идентификатор будет изменен изменением тега select, а затем измените идентификатор в качестве значения параметра

но если в форме есть другие разделы, поэтому нам нужно установить атрибут для этого div, например

   <div id='var_div' changeId="true">
    </div>
  

а затем выполните цикл по разделам, отобразите его и измените идентификатор

 function updatevariable(elm) {
var divs =   document.getElementByTagNames('DIV');
   for(var i =0;i<divs.length;i  )
     {
      if(divs[i].getAttribute('changeId')!=null) {
        if(divs[i].getAttribute('changeId')=="true"){
              divs[i].id=elm.options[elm.selectedIndex].value;
             }
           }
      }
  }
  

это сказало
С уважением
Пожалуйста, отметьте этот ответ как правильный, если он вам полезен
🙂