셀렉트박스로 클래스추가 질문드립니다.

셀렉트박스로 클래스추가 질문드립니다.

QA

셀렉트박스로 클래스추가 질문드립니다.

본문

주소 :http://wnghks2516.cafe24.com/index2.php

 


<meta charset="utf-8">
<select id="change_theme">
         <option value="day_three">day_three</option>
            <option value="night_three">night_three</option>
            <option value="abcdef">abcdef</option>
            <option value="ambiance">ambiance</option>
            <option value="ambiance-mobile">ambiance-mobile</option>
            <option value="ayu-dark">ayu-dark</option>
            <option value="ayu-mirage">ayu-mirage</option>
            <option value="base16-dark">base16-dark</option>
            <option value="base16-light">base16-light</option>
            <option value="bespin">bespin</option>
            <option value="blackboard">blackboard</option>
            <option value="cobalt">cobalt</option>
            <option value="colorforth">colorforth</option>
            <option value="darcula">darcula</option>
            <option value="dracula">dracula</option>
            <option value="duotone-dark">duotone-dark</option>
            <option value="duotone-light">duotone-light</option>
            <option value="eclipse">eclipse</option>
            <option value="elegant">elegant</option>
            <option value="erlang-dark">erlang-dark</option>
            <option value="gruvbox-dark">gruvbox-dark</option>
            <option value="hopscotch">hopscotch</option>
            <option value="icecoder">icecoder</option>
            <option value="idea">idea</option>
            <option value="isotope">isotope</option>
            <option value="lesser-dark">lesser-dark</option>
            <option value="liquibyte">liquibyte</option>
            <option value="lucario">lucario</option>
            <option value="material">material</option>
            <option value="material-darker">material-darker</option>
            <option value="material-ocean">material-ocean</option>
            <option value="material-palenight">material-palenight</option>
            <option value="mbo">mbo</option>
            <option value="mdn-like">mdn-like</option>
            <option value="midnight">midnight</option>
            <option value="monokai">monokai</option>
            <option value="moxer">moxer</option>
            <option value="neat">neat</option>
            <option value="neo">neo</option>
            <option value="night">night</option>
            <option value="nord">nord</option>
            <option value="oceanic-next">oceanic-next</option>
            <option value="panda-syntax">panda-syntax</option>
            <option value="paraiso-dark">paraiso-dark</option>
            <option value="paraiso-light">paraiso-light</option>
            <option value="pastel-on-dark">pastel-on-dark</option>
            <option value="railscasts">railscasts</option>
            <option value="rubyblue">rubyblue</option>
            <option value="seti">seti</option>
            <option value="shadowfox">shadowfox</option>
            <option value="solarized">solarized</option>
            <option value="ssms">ssms</option>
            <option value="the-matrix">the-matrix</option>
            <option value="tomorrow-night-bright">tomorrow-night-bright</option>
            <option value="tomorrow-night-eighties">tomorrow-night-eighties</option>
            <option value="ttcn">ttcn</option>
            <option value="twilight">twilight</option>
            <option value="vibrant-ink">vibrant-ink</option>
            <option value="xq-dark">xq-dark</option>
            <option value="xq-light">xq-light</option>
            <option value="yeti">yeti</option>
            <option value="yonce">yonce</option>
            <option value="zenburn">zenburn</option>
    </select>
        <link rel="stylesheet" href="/theme/day_three.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/night_three.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/abcdef.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/ambiance.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/ambiance-mobile.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/ayu-dark.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/ayu-mirage.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/base16-dark.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/base16-light.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/bespin.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/blackboard.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/cobalt.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/colorforth.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/darcula.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/dracula.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/duotone-dark.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/duotone-light.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/eclipse.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/elegant.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/erlang-dark.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/gruvbox-dark.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/hopscotch.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/icecoder.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/idea.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/isotope.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/lesser-dark.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/liquibyte.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/lucario.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/material.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/material-darker.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/material-ocean.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/material-palenight.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/mbo.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/mdn-like.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/midnight.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/monokai.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/moxer.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/neat.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/neo.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/night.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/nord.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/oceanic-next.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/panda-syntax.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/paraiso-dark.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/paraiso-light.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/pastel-on-dark.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/railscasts.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/rubyblue.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/seti.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/shadowfox.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/solarized.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/ssms.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/the-matrix.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/tomorrow-night-bright.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/tomorrow-night-eighties.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/ttcn.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/twilight.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/vibrant-ink.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/xq-dark.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/xq-light.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/yeti.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/yonce.css"><!-- theme -->
               <link rel="stylesheet" href="/theme/zenburn.css"><!-- theme -->
       
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>SageMathCell</title>
    <script src="https://sagecell.sagemath.org/static/embedded_sagecell.js"></script>
    <script>
    // Make the div with id 'mycell' a Sage cell
    var sage1 = sagecell.makeSagecell({inputLocation:  '#mycell',
                           template:       sagecell.templates.minimal,
                           evalButtonText: '으아ㅏ아아아'});
    // Make *any* div with class 'compute' a Sage cell
    var sage2 = sagecell.makeSagecell({inputLocation: 'div.compute',
                           evalButtonText: 'Evaluate'});
    
 var input = document.getElementById("change_theme");
    $('#change_theme').on('change', function(){
        if(this.value !== ""){
            var optVal = $(this).find(":selected").val();
            $.post('ajax.code.php',{optVal:optVal}, function(data) {
                var date = $('.qqqq').val(data);  // data는 ajaxPHP.php 파일에서 ehco 문의 결과 값             
                   $('.CodeMirror').addClass(data);
                   $('.CodeMirror').removeClass('cm-s-default');
            });
        }
    });
    </script>
  </head>
  <body>
  <h1>Embedded Sage Cells</h1>
  <h2>Factorial</h2>
  Click the “Activate” button below to calculate factorials.
    <div id="mycell"><script type="text/x-sage">
@interact
def _(a=(1, 10)):
    print(factorial(a))
 </script>
</div>
<h2>Your own computations</h2>
Type your own Sage computation below and click “Evaluate”.
    <div class="compute"><script type="text/x-sage">plot(sin(x), (x, 0, 2*pi))</script></div>
    <div class="compute"><script type="text/x-sage">
@interact
def f(n=(0,10)):
    print(2^n)
</script></div>
  
  </body>
</html>
 
-------------------------------------
ajax.code.php
<?php
       $ajax = $_REQUEST['optVal'];
       echo $ajax;
       ?>

 

3543499038_1588814517.1511.png

 

위 코드를 실행하면 원하는 클래스에 중첩이 되어 저장이 되어집니다.

 

제가 원하는건 셀렉트박스의 옵션을 고를 시 , 기존의 데이터는 지워지고 덮어질 수 있게 할려면 어떻게 해야 할 지 모르겠습니다..

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 49
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT